Build an app with Ionic Framework

What's Ionic Framework ?

Ionic is a hybrid mobile app development framework using which we can create mobile applications which can be build for different platforms like iOS, android, windows etc from the same code base. Ionic is built on top of Apache Cordova and AngularJS which means we can program Ionic apps in familiar web technologies like HTML-5, CSS, SASS etc

What shall we build in this tutorial ?

In this tutorial, we're going to build a Hello World Ionic android app using the Ionic framework. We'll highlight all the steps you need to perform to build and run your app for android.


Please ensure that following are installed on your system for Ionic Development for Android ::

  1. Java Development Kit ( JDK ) : Install Java Development Kit (JDK) 8 or later
  2. Android SDK : Install Android Studio.
  3. Android SDK packages : Open the Android SDK Manager (run android or sdkmanager from the terminal) and make sure the following are installed:
    • Android Platform SDK for your targeted version of Android
    • Android SDK build-tools version 19.1.0 or higher
    • Android Support Repository (found under "Extras")
  4. Node.js / NPM :: you also need to have Node.js and NPM installed
  5. Environment Variables : Cordova's CLI tools require some environment variables to be set in order to function correctly. The CLI will attempt to set these variables for you, but in certain cases you may need to set them manually
    • Set the JAVA_HOME environment variable to the location of your JDK installation
    • Set the ANDROID_HOME environment variable to the location of your Android SDK installation
    • It is also recommended that you add the Android SDK's tools, tools/bin, and platform-tools directories to your PATH

If you're on Linux, you can use commands as given below. But ensure that the values for the variables corresponds to the the actual locations of the tools in your machine
export ANDROID_HOME=/Development/android-sdk/
To update your PATH, add a line resembling the following (substitute the paths with your local Android SDK installation's location):
export PATH=${PATH}:/Development/android-sdk/platform-tools:/Development/android-sdk/tools
Reload your terminal to see this change reflected or run the following command:
$ source ~/.bash_profile


npm install -g cordova ionic

Create a new Ionic App project with ionic start command

ionic start helloworld blank 

The above command creates a new ionic project with the name helloworld.
Change to current working directory to the root of the ionic project :
cd helloworld 

Run the app locally on browser to see how it looks::
ionic serve 

This will start the app on your local machine and will open your app in the browser. Edit the homepage of the app :: Add android as a platform to the app, this is required to make the app run on an android device
ionic platform add android 

And finally to build your app
 ionic build android

The above command will create the apk file which you can copy to your android device and run as an android app.

  • What's Ionic framework
  • What shall we build in this tutorial
  • Prerequisites
  • Install IONIC & CORDOVA