JavaScriptJavaScript

First Steps To Do When You Start A Project With Ionic

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:

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!

Hey, if you've found this useful, please share the post to help other folks find it:

There's even more:

Subscribe for updates

  • via Twitter: @timonweb
  • old school RSS:
  • or evergreen email ↓ ↓ ↓