Setup Environment for Ionic Development

2 minutes, 11 seconds

First of all I am being moved to learn Ionic, and to write a guide how to get started. First of all what is Ionic, it’s a framework that let you build apps crossplatform for iOS and Android with the same codebase. It’s suitable for non-intensive and informative apps. Best of all, crossplatform. It uses technologies such HTML, CSS, JavaScript. AngularJS to empower to apps.

Unlike native apps, it doesn’t have official IDE, you can use any suitable editor like Sublime Text 2.

Lets get start with it. On this tutorial I use Mac with macOS Sierra, so if you are on Windows or Linux it should be almost similar, but please do comment if you need to ask anything below.

1. Install Node.JS

Go to NodeJS Website download the stable version to your computer. Open the installer then install it.

This will install Node.JS and npm like as follows.

2. Install Ionic

Open the terminal.

sudo npm install -g cordova ionic

3. Start (Generate) a Project

There is 3 type of app templates you can start with: blank, tabs and sidemenu.

// blank app
ionic start myApp blank
// tabs app
ionic start myApp tabs
// side menu app
ionic start myApp sidemenu

※ To generate Ionic Version 2 you may add –v2 like this

ionic start ionic-todo blank --v2

4. Run it

Go to the app directory after project generation was completed.

cd myApp

ionic serve

It will open a browser pointing to localhost like this.


What’s Next

We will explore a bit on Ionic on this next post. Make sure to check it out. Build Todo App with Ionic 2.