Mobile

Quick Tip – Installing the Ionic Framework for HTML5 Apps

Mark Brown
Share

Ionic is a framework for building hybrid mobile apps using the web technologies you know and love, Angular and Cordova. The Ionic 2 release (currently in beta) leverages Angular 2 (also in beta) and ES6, and you can opt into TypeScript if you prefer. It allows you to write your application code once in HTML, CSS and JavaScript and deploy to multiple targets using the same code and have them look and feel like native iOS and Android apps. In this quick tip I will cover installing the Ionic framework and how to get started creating an app.

Installing

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 --ts flag.

ionic start my-mobile-app --v2 --ts

Run in the Browser

To open the app in your browser run:

ionic serve

This will compile your assets and start a local development server.

App Running

You will now be at the ionic prompt, to return to you normal prompt type quit.

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:

cordova requirements

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.

App Running on a device

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.

Your Application

The custom code for your app sits under the app directory and is just a collection of HTML and JavaScript (or TypeScript)

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 build and run with ionic run <platform> to see the changes reflected in an simulator.

Next Steps

  • 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!

CSS Master, 3rd Edition