Oct 31, 2014 · Updated: Nov 10, 2017 · by Tim Kamanin
Here are the first steps I do when I start developing a mobile app with Ionic Framework. Ionic has a great getting started page where the main steps are perfectly described, but I usually do a little bit more of a setup. Here's my routine:
npm install -g cordova ionic
Note you need to have node.js installed before doing this.
ionic start myProjectName template_name
Actually you can select from different templates here, replace template_name with blank if you want to start with a blank app project, tabs if you want to start with tabbed project and sidemenu if you want to have a sidemenu. Of couse these are just starting templates and you can always add sidemenu or tabs to the project later, so choosing a template just gives you a pregenerated template and doesn 't mean that you opt for one or another layout. IMHO sidemenu is a better one as it gives you lots of thing prebaked including login form.
While you're at the root of your app, run
to install local node modules which are needed for the next step.
a) By default, Ionic sets your project the way you're going to use standard css for your style customizations. I prefer to use a preprocessor whenever I can, so prefer to start with SASS right away. Ionic has a nifty command that does a bunch for us:
ionic setup sass
It will make necessary changes in your project structure. b) After that, create a style.scss file for our customizations and put it into www/scss directory. c) Then, find ionic.app.scss file in scss directory in the root and add @import "../www/scss/style"; at the end of the file. Now you have a setup that allows you to introduce your own customizations in www/scss/style file that 'll automatically compile into css when you run your server via ionic serve command.
The cool thing is that you don't need a mobile emulator for development (you'll need it later for tests of course), so to start the fun you just need to run your development server with a command:
Ionic will take care of the rest and will orchestrate sass compilation and live reloading once you've changed anything in your code. Relax and enjoy mobile app development with Ionic!
Hey, if you've found this useful, please share the post to help other folks find it: