Ionic Live Preview iOS App

August 25th 2014

When working on your Ionic app, nothing is better than testing directly on your phone. Animations, interactions, available APIs are all different on your phone than they are in your browser. It can be a bit of a pain to test builds directly on your phone though. ionic run ios can take up to 30 seconds to build your whole app and install it on your phone, and it’s always nicer to minimize feedback time between development and testing.

With this in mind, I built a Swift app to have a viewport from my phone to my live reload server. The app scans your local network to find any IP address that is publishing an ionic live reload service. Once it finds one, it loads up that view into a UIWebView just like you would have in a production app.

https://github.com/RokkinCat/IonicPreview

Getting Started

  1. Clone the repo: git clone https://github.com/RokkinCat/IonicPreview.git
  2. Start your live reload server: ionic serve -b
  3. Plug your phone in
  4. Open IonicPreview.xcodeproj with XCode
  5. Run the project on your phone with Cmd + R or the play button in the top left corner
  6. Unplug your phone and test away!

Within a few seconds, your app should show up on your phone.

Caveats

  • Currently doesn’t support cordova plugins (you’ll have to actually install the app on your phone to do that for now)
  • Doesn’t have access to any standard cordova features yet

Coming soon

  • Install your plugins over the LAN on the fly
  • Bootstrap the cordova.js file into the web view
  • Manual reload button
  • Continuous scanning

If you’re working on Ionic Projects, you may be interested in the preview package I wrote for the atom editor to live-preview your apps right from your editor.

http://blog.rokkincat.com/hacking-atom-previewing-ionic-apps-in-your-editor/

RokkinCat

is a software engineering agency. We build applications and teach businesses how to use new technologies like machine learning and virtual reality. We write about software, business, and business software culture.