Setup your development environment to build Ionic apps

Ionic Framework is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease. It allows you to easily build apps using friendly web tech you are already familiar with. The good news is: if you can manage to create websites, you already know how to build mobile apps. Check Ionic Framework introduction and key components if you are just starting with Ionic framework.

In this tutorial we will show you how to setup your local development environment so you can start developing Ionic apps. Real application development takes place in a local development environment such as your machine. Just follow the setup instructions for creating a new project.

Ionic apps are designed principally through the Ionic command line utility (the "CLI"), and utilize Cordova to build and deploy as a native app. Therefore, some utilities must be installed to start developing.

The Ionic CLI is a fantastic tool for developing Ionic apps. It will help you along your developing journey to do things such as building your app for ios or android platforms or to add cordova plugins. By typing $ ionic --help in your console, you can see all the list of the available commands that you can use.

In order to develop Ionic projects, the latest versions of the CLI and Cordova must be installed. You must previously make sure to have a recent Node.js version. Then you can continue to install the Ionic CLI and Cordova for native app development.

Node.js and npm are vital for current web development with Angular and other platforms. Node powers client development and build tools. Also, the npm package manager which is a node app itself, installs JavaScript libraries. Check if you already have them in your computer. Otherwise, download and install them now.

$ npm install -g ionic cordova

Note: You may need to add "sudo" in front of these commands to install the utilities globally.

With Ionic and its features installed, we can move on and start building our first app. Let’s go!

Developing a new app has never been this easy before! Go to you command line and run:

$ ionic start yourAppName

This command creates a working Ionic app. It installs all dependencies for you and sets up your project.

You can cd into the created folder right. For a preliminary view of your app in the browser, use the serve command. It also runs the compiler in watch mode, starts the server, and keeps the app running while we continue to build it:

$ cd yourAppName

$ ionic serve

You should see an app with a welcome message like the above if everything was installed successfully.

Inside of the folder that was created, we have a typical Cordova project structure where we can start working and also install native plugins, and create platform-specific project files. In our next tutorial, we will go over the project structure and its different components.

You can edit the code in your preferred code editor. Personally I use atom.io.

Each platform has certain particularities and installation requirements before you can get the most out of your Ionic and Cordova development. In order to test the app on your phone, as a native app, you should do one more thing.

For iOS app developers, take a look at the Cordova iOS Platform Guide and follow the instructions to install or upgrade Xcode, and possibly sign up for a developer account to start building apps for iOS.

For Android app developers, take a look at the Cordova Android Platform Guide and follow the instructions to install the Android SDK and Android Studio to start building apps for Android.

In Ionic apps there’s some more boilerplate compared to ionic 1 apps, but don’t panic. The new ionic CLI also has more tools to help you out with this.

Take for example the new generator functions, they provide an easy way to create pages and services for your app. This makes going from a basic app to a full featured app with navigation much easier.

To create a page you can use the following command:

$ ionic generate page

Also, all of the following commands are available to use:

Note: Please refer to ionic documentation for more information about adding pages to your app.

Note: Sometimes if you add new files to the project they won’t get compiled right away, so you would have to stop (ctrl+c) the app you served with ionic serve and start serving it again by running ionic serve again.

Now that you have all the necessary requirements to start building ionic apps, you should continue with the Ionic Application Structure where we will discuss what should a typical Ionic app architecture look like. Also we will explain in regular words which are the main building block of an ionic app and how to use them.

We have more beginners tutorials that you may find super useful during your learning journey.