Set up Ionic framework

2014-09-26

Firstly, what is the Ionic framework? Basically a scaffolding for hybrid mobile development with Angular JS, Cordova and a whole lot of UI elements such as buttons, icons, cards, tabs, etc. that look very similar to iOS 8 and highly configurable with just CSS classes, etc. Also allows you to hook into gulp among other things. Anyways, check it out beforehand.

So first thing is you need Node JS installed. I already had this but it was an old version so I needed to upgrade. There are ways to do this via the command line but with Windows I wasn’t having much luck so I just grabbed the latest MSI and that updated just fine. Next up make sure NPM (Node JS Package Manager) is installed / up to date also. Then grab cordova and then ionic.

>npm install -g npm

>npm install -g cordova

>npm install -g ionic

Finally go to where you want to store you projects and run the following to scaffold your project. I went with a “blank” template but there are various different ones such as with tabs, etc.

>ionic start YourAppNameHere blank

After that it’s ready to go. Below are some commands that are displayed once the project is ready (for reference purposes).

  • Setup this project to use Sass: ionic setup sass

  • Develop in the browser with live reload: ionic serve

  • Add a platform (ios or Android): ionic platform add ios [android]
    Note: iOS development requires OS X currently
    See the Android Platform Guide for full Android installation instructions:
    https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html

  • Build your app: ionic build <PLATFORM>

  • Simulate your app: ionic emulate <PLATFORM>

  • Run your app on a device: ionic run <PLATFORM>

  • Package an app using Ionic package service: ionic package <MODE> <PLATFORM>

For more help use ionic –help or visit the Ionic docs: http://ionicframework.com/docs


Comments: