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
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: