Quick Tip – Installing the Ionic Framework for HTML5 Apps
First install Node.js from their official packages, Homebrew (Mac), Chocolatey or Scoop (Windows). Ionic uses the package manager of Node.js, npm, for installation.
On OSX and Linux open a Terminal and run:
npm install -g ionic@beta npm install -g cordova
On Windows open Command Prompt run:
C:\>npm install -g ionic@beta C:\>npm install -g cordova
Note: Ionic 2 requires the
@beta tag until the full version is released.
Create a Project
The Ionic 2 package can install both v1 and v2 projects. Create a new v2 project with
ionic start <name> --v2, e.g.
ionic start my-mobile-app --v2 cd my-mobile-app
If you’re curious about TypeScript you can include it with the
ionic start my-mobile-app --v2 --ts
Run in the Browser
To open the app in your browser run:
This will compile your assets and start a local development server.
You will now be at the ionic prompt, to return to you normal prompt type
Add a Platform
Add a platform with
ionic platform add <platform>, e.g.
ionic platform add ios ionic platform add android
To build and run an app you’ll need to have installed the SDKs for each platform that you want to target. To check you have everything installed needed for the platforms you have added run:
Note: To run iOS apps locally you’ll need XCode installed. For Android development I recommended installing GenyMotion to help with emulated devices.
Run on a Platform
Run the apps with
ionic run <platform> e.g.
ionic run ios ionic run android
This command will re-compile the assets, and install on the device with Cordova.
One nice thing about Ionic is that the single code base is styled to suit each platform. Colors, fonts, icons, form elements and components all look the part. The Ionic team also take performance seriously, so you’ll be hard pressed to tell an application apart from their native cousins.
The custom code for your app sits under the
During development you can do the majority of the coding and testing in the browser with
ionic serve. To test on a device you’ll need to
ionic run <platform> to see the changes reflected in an simulator.
- You can write ES6 in your Ionic Apps thanks to Babel and Browserify.
- Sass is enabled by default.
- You can use Ionic Components in your HTML or build your own with HTML, CSS and JS.
- You have Native Components which are wrappers around Cordova plugins for access to device features.
- For simpler apps, you can just Theme it
If you haven’t used Cordova before it’s worth reading SitePoint’s Quick Tip on Installing Cordova as that’s what Ionic is built on top of.
Next I recommend the Ionic 2 Tutorial which explains how to get started with pages and navigation, and SitePoint has plenty of articles covering Ionic to dig deeper.
Ionic makes it possible to build cross-platform mobile apps extremely quickly and comes with a great component library that’s easy to extend. Enjoy!