Building Hybrid Mobile App Using Ionic Framework – Setup

Ionic is an HTML5 based framework for creating hybrid mobile apps. You don’t need to learn some new technology or programming language to create apps using Ionic framework. Rather it uses web technologies like HTML, CSS and JavaScript to create apps which most of you already know.

The main purpose of Ionic is providing the UI part of your app i.e. the look and feel. You can create normal apps using HTML, CSS and JavaScript framework, but for more complicated apps Ionic recommends using AngularJS framework.

To setup Ionic on your system you need to have NodeJS installed on your machine. You can download appropriate setup from here.

You can check whether nodejs has been installed on your system by running the following command from the command prompt. It will display the current version of npm installed on your system. NPM is a package manager that comes bundled with nodejs. You can read more about nodejs here.

npm --version

Next step after installing nodejs is to install ionic. Run the below command to globally install ionic on your system. Remove sudo prefix if you are on windows system.

sudo npm install -g ionic

Also we need to install cordova platform to successfully test and build our app for various platforms like android and iOS.

sudo npm install -g cordova

Now we can start building our ionic project. Ionic provides two ready to use templates and one blank project. For
our project we will use the sidemenu template.

ionic framework setup

ionic start firstApp sidemenu

This command will create a folder named firstApp and download all the necessary files for you to begin development. This template comes with some data in it, so you can test your app without making any changes to it.

Step 1: Go into your app folder

cd firstApp

Step 2: Add the platform for which you are building your app. Necessary files will be downloaded. To build for android you need to have Android SDK installed on your system and to build iOS apps you need to be on a Mac system.

ionic platform add android

Step 3: After the platform is added, we can build our app using the Cordova framework.

ionic build android

Step 4: And finally Ionic along with Cordova can emulate the app and test it on your system.

ionic emulate android