NB

How to run your Ionic app on real devices

How to run your Ionic app on real devices

Recently I’ve been working on an Ionic app and wanted to explain how to run your app on a real device via Terminal.

If you prefer to avoid the command line altogether and are on a Mac, then I recommend downloading Ionic Lab. Lab is a brilliant desktop app for creating, building, testing, and deploying Ionic apps. At the time of writing it is Mac only but I hear it’s coming real soon for Windows users.

For this tutorial, my devices are an iPhone 6 on iOS8 and a Galaxy Note 4 running Lollipop 5.0.1. I’m also on a MacBook Pro with OS X Yosemite.

It’s worth noting at this point the issues I had during this process - make sure you have the necessary permissions on your app directory, that is, you have read/write access and are the owner of the files - just right-click on your app folder and select Get Info. As I quickly discovered I wasn’t and received errors.

The process

Lets fire up Terminal then and we’ll get started! Make sure you plugged in your device into your machine at this point if you haven’t already.

Navigate to your Ionic app directory

$ cd MyIonicApps/IonicProject

Depending on whether you have an Android or iOS device then now run the relevant command.

$ ionic platform add ios
$ ionic platform add android

Build it!

$ ionic build ios && android

Ensure you save your changes and build for each platform so that when you run your project on real devices, the changes will be reflected.

iOS

An iOS Provisioning Profile is required to run on any iOS device. Just go to Apple’s developer portal and create a developer provisioning profile.

I’m assuming at this point that you have already have Xcode installed on your Mac. In your project directory, go to platforms > ios and you should see the Xcode file. Double click this file and Xcode will load your project.

Xcode file

Back to the terminal, type in this command

$ cordova prepare

This copies all the files into the specified platforms, or all platforms so it is then ready for building by Eclipse, Xcode, etc.

Go to Xcode and update the Bundle identifier to match the one you used from your iOS App ID. Hit save (command+S).

In Xcode, in the top right corner, choose your device and click Run.

Select iOS device

Android

First step is to enable Developer Options on your Android phone. By default the Developer Options are turned off. Once you turn them on, enable USB debugging.

To turn Android Developer options:

Go to your phone’s settings > About device > find a Build Version.

Tap the Build Version 7 times.

Tap the Developer Option. Scroll down to find USB Debugging and tick the box.

Go back to the terminal and type the command below to run for Android.

$ ionic run android

Your Ionic app should be running on real devices now, for both iOS and Android.