At M-Way Solutions we've been building large-scale enterprise-level apps with Ionic for the past two years. The challenges we faced sparked the creation of Generator-M-Ionic, a powerful open-source collection of development tools alongside the Ionic CLI, that put the fruits of our extensive experience right at the end of your fingertips.
Are you looking for a single tool that you can use to quickly create compelling prototypes for impressing your customers AND that later scales with complex project requirements like testing, quality assurance, and continuous integration? Then look no further and prepare yourself for a thrilling ride through our generator's Building-apps-with-Ionic adventure island!
First stop is at the ancient ruins of Pre-Ionic-mobile-app-development: We've been developing mobile apps long before Ionic made it into our development stack along with Angular. We consistently explored different combinations of MV* frameworks and mobile frameworks throughout the years, we even developed our own mobile framework for quite some time but Angular & Ionic kept consistently impressing us. Focussing on Angular and Ionic allowed us to tackle many of the other challenges that app development, our business and enterprise customers pose.
These challenges led to the genesis of Generator-M-Ionic and catapulted us straight into Ionic-mobile-development-fun-land. The generator now is a valuable contribution to our development process and company culture and addresses the following aspects of mobile app development:
So it now stars as the one go-to starting point for ourselves and a growing community when it comes to mobile app development with Ionic. And you can start using it today! Whether you're throwing together a proof of concept for a customer or a prototype for a presentation, the project is able to seamlessly transition into a full-fledged powerful enterprise app, no matter which platforms or sets of devices you are developing for.
This post is part of a series on kick-starting your development with Ionic and Generator-M-Ionic, so without any further ado here is the fun-map of our three-act-adventure:
So pack your shovels, buckets and the rest of your building-equipment and meet me in the playground to set up your first app!
While I will try to explain everything from the ground up, I do expect you to have some experience in web development and development with Angular and Ionic in general.
So before we dive into the sandbox we'll have to check whether your system is ready for cross-platform HTML5 app development. The first thing you need to install is Node and the Platform SDKs for the platforms you want to develop for. The latter is only needed if you want to run your app on a real device during development. Have you already built apps using the Ionic CLI? Then chances are high you already have those installed and don't need to do it again. You haven't? Then follow our Installation and Prerequisites Guide.
After you've set up everything properly launch your terminal -if you haven't done so already- and run:
1npm install --global generator-m-ionic bower yo gulp
This will install Generator-M-Ionic using the node package manager along with the popular web development tools Bower (manage and install client packages like Angular), Yeoman (runs the generator and scaffolds your app) and Gulp (runs all post-setup tasks). If you don't know what these are, the What's in the box Guide can help shed some light on the technologies Generator-M-Ionic uses.
Once all of this is done, you probably want to create a new folder to generate your project in and launch the generator:
1# create new directory and change into it 2mkdir adventure-island && cd $_ 3# launch generator 4yo m-ionic
You'll be asked a series of questions regarding the project you're creating, like this one:
If you're not sure what some of these mean, they are explained in the Questions introduction document. For the rest of this series I'm going with
tabs as a starter template. When you've answered all the questions, all the node and bower dependencies will be installed for your project. This might take a while but luckily you'll only have to do this once for each project.
After everything's done run:
Your default browser will open up automatically. If you don't want that, adding the
--no-open flag will prevent opening your browser or a new window. Now activating your developer tools (
cmd+alt+i in Chrome on OS X) will let you see your app as below.
Congratulations you've built your first app! This might not look like much now, but the generator has done A LOT of work for you already. Let's have a closer look:
Your project folder now contains a lot of files that were generated for you. In order to give you a first general orientation, the most important of these files are:
1config.xml # configuration of your Cordova project 2platforms/ # platforms you installed 3plugins/ # plugins you installed 4www/ # will contain the build of your web app, before Cordova is added
1bower.json # dependencies like Angular & Ionic installed to app/bower_components/ 2gulpfile.js # configuration of all the Gulp tasks 3gulp/ # more Gulp tasks 4package.json # dependencies like Gulp plugins installed to node_modules/
1app/ 2 └── index.html # single most important file, everything is wired together here 3 └── app.js # include modules YOU create, for now only 'main' 4 └── main/ # all other app files, angular files, styles, assets, ... 5 └── main.js # routing, angular module dependencies 6 └── ...
Everything that makes up your app comes together in this file: Cordova, Ionic, Angular, Angular modules, your own application logic, styles and assets. I'll give some more details here without going into the particulars too much:
When you ran
gulp watch it did this to your
And whenever you make changes to your application files or if you create new ones,
gulp watch will update all necessary files and reload your browser. Additionally -besides the necessary HTML and angular bootstrapping we just discussed- the
cordova.jsfile that Cordova provides upon build
Now that you have created your first app with Generator-M-Ionic and wired it all together with
gulp watch, it might be a good time to secure your progress! Good thing your project comes with a fine-tuned Git integration already! So simply type the following in your project folder:
1git init # initialize git 2git status # show all files that git can track
You'll notice that we have already talked about most of the files that Git finds. Worry not, we will discover the rest of them step by step throughout this series. However you might also notice that Git ignores all the third party code of Bower, Node and Cordova, namely the
plugins/ folders. This is done using the
.gitattributes files which got accordingly configured during project setup. Thus Git ignores all files that aren't source files or in any other way specific to your project, keeping your repository nice and small and your commits clutter free. For the curious of you there's a Git integration Guide in the documentation with more particulars.
So to create your first commit, all you have to do is:
1git add . # add all relevant files 2# create commit 3git commit -m "project setup with yo m-ionic and gulp watch"
Side note: I'm using double quotes on any terminal related strings, because they're safe on all systems. On OS X or Linux, using single quotes is just fine.
You've taken your first steps with Generator-M-Ionic, learned about file structure,
gulp watch and Git integration! Take your development to the next level in part 2 of our series covering quality assurance, adding a variety of ingredients to your app and integrating into different ecosystems like Ionic Platform.
Feedback, ideas, comments regarding this blog post or any of the features discussed here are very welcome at our Generator-M-Ionic's Github repository or the Generator-M-Ionic Gitter Chat.
Author: Jonathan Grupp
Headline illustrations: Christian Kahl
Special thanks to Volker Hahn, Mathias Maier & Tim Lancina
Originally published July 5, 2016 on the Ionic Blog in a slightly modified version.