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.
- 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
- Make sure your app is functioning as you’d like it. Run
ionic serve --lab --nolivereloadand play around with it’s side-by-side iOS and Android emulation in your browser.
- While you’ve got the ionic emulator open in your browser, save the page’s html source as
index.htmlin your ionic project’s topmost folder folder.
- Open up this page in a text editor.
- Search for iframes with ids
android-frame. Update each iframe’s
srcattribute to read
- Search for
angular.min.jsand replace with
- Save this your changes to this file.
- Upload this file, along with the contents of your ionic project’s
wwwfolder to a web-accessible location. Ensure the index.html file you made changes to resides one level up from the
This comes (pretty much unchanged) from http://forum.ionicframework.com/