First Steps To Do When You Start A Project With Ionic

31 Oct · by Tim Kamanin · 2 min read

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)

bash

npm install -g cordova ionic

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

2) Start a project

bash

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

bash

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:

bash

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:

bash

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!