First Steps To Do When You Start A Project With Ionic

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:

1) Install Ionic (if you haven't installed it)

npm install -g cordova ionic

Note you need to have node.js installed before doing this.

2) Start a project

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.

3) Install local node modules

While you're at the root of your app, run

npm install

to install local node modules which are needed for the next step.

4) Setup Sass

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.

5) Run development server

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 serve

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!