0 comments

Posted

Ionic Framework
I’ve been working with the powerful ionic framework lately. Never heard of it? It’s the latest generation of development tools that lets web developer plebs created rich, true-to-native mobile apps for both iOS and android using one codebase. To top it off, this codebase is in something very familiar to the average web developer – angular (JS), HTML 5, and CSS. While not as powerful as coding in iOS or android’s native languages, it goes a long way to delivering a mobile app without learning one or two brand new tech stacks.

Among ionic’s incredible feature-set is its ability to fire up an in-browser emulator of what the app will look like in iOS and android devices. While this is really meant for in-development testing of your app, in my case I wanted to permanently host this emulation on a server for others to see. After a bit of fiddling and a helpful blog post, I was able to figure out how to permanently host the emulator on a server.

Note – the following instructions presume you already have a web server (apache, nginx, …) setup and working.

  1. Ensure your ionic project is running with all its dependencies up to date. In my case, I’m using bower as a dependency manager, so I run bower update.
  2. Make sure your app is functioning as you’d like it. Run ionic serve --lab --nolivereload and play around with it’s side-by-side iOS and Android emulation in your browser.
  3. While you’ve got the ionic emulator open in your browser, save the page’s html source as index.html in your ionic project’s topmost folder folder.
  4. Open up this page in a text editor.
  5. Search for iframes with ids iphone-frame and android-frame. Update each iframe’s src attribute to read www/index.html?ionicplatform=ios and www/index.html?ionicplatform=android, respectively.
  6. Search for angular.min.js and replace with www/angular/lib/angular.min.js
  7. Save this your changes to this file.
  8. Upload this file, along with the contents of your ionic project’s www folder to a web-accessible location. Ensure the index.html file you made changes to resides one level up from the www folder.

This comes (pretty much unchanged) from http://forum.ionicframework.com/