How to run Ionic on real devices

How to run ionic on real devices feature image

The iOS simulator and Genymotion are good and all, but there are cases where we want to run our apps on real devices. Running on devices definitely gives a different feel. This tutorial will show you how to run Ionic on real devices via the terminal.

For this tutorial, I’m using iPhone 5S running on the iOS8 and HTC One running on Android 4.4.3. 

Plug in your devices

This should be an obvious step. But sometimes one can forget. (=^x^=)

Pluging real iOS and Android device

Close or Quit any Genymotion or AVD’s.

We have to close any Android virtual device because the Android SDK recognizes them as real devices. For instance, if we tried to run the project, the virtual device might take precedence over the connected Android device, and the project would get installed onto the virtual device instead. This step is just to be safe, but it’s up to you.

Go to your Ionic app directory


$ cd MyIonicApps/IonicProject

Make sure you’ve configured platforms

If you haven’t:


$ ionic platform add ios
$ ionic platform add android

Build first


$ ionic build ios && android

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

Get an iOS Provisioning Profile

This is necessary to run on any iOS device. Just go to Apple’s developer portal and create a developer provisioning profile. 

Let’s Run it!

iOS

By this time, you must have an iOS Provisioning Profile and make sure that it’s recognized by Xcode. Ready?!

  1. In your project directory, go to platforms > ios and you should see the Xcode file. Double click that Xcode file and wait for Xcode to load your project!

    Find the Xcode file
  2. Back to the terminal, type cordova prepare
  3. Go to Xcode and update the Bundle identifier to match the one you used from your iOS App ID Hit save (command+S).

    Change the Bundle Identifier in Xcode from default Ionic one to match the provisioning profile
  4. On Xcode, look at the top right corner. Choose your device and click Run.

    Run Ionic project from Xcode to real iOS device

Android

Have your Android phone turn on Developer Options. Some old phones have them on by default. But (I think) from Android 4.0 and above, the Developer Options are turned off. Once you turn them on, enable USB debugging.

To turn Android Developer Options on your phone:

  1. Go to your phone’s Settings app > About > find a Build Version.
  2. Tap the Build Version 7 times.
  3. Go back to the home view of the Settings app. Developer Options should be in the list. Usually it’s near the About option or next to it.
  4. Tap the Developer Option. Scroll down to find USB Debugging and check it.

Go back to the terminal and type the code below to run for Android. Then just eyeball the Android device. It shouldn’t take long for the app to install and start up. You can also look at the terminal for statuses.


$ ionic run android

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

  • Ben

    Hi there, thanks for this tutorial, but I was wandering if there is a way to do that with command line.
    Thanks

    • June Rockwell

      Hi Ben. Thanks for reading. To answer your question, the “code” examples in this article are the commands done on the terminal in MacOS (command line). But do you mean the command line in Windows OS?

  • Eddy Chung

    Thank you! This tutorial helped me how to build an app which can be run on a real iOS device.

  • zbrspyjms

    Great post! Clear and useful.
    Thank you so much!

  • Mahesh

    I am facing problem while adding Android platform i ionic.

  • Douglas Villanacci Pasqua

    Thank You! You helped me to run on a real IOS device.

  • Emrah Çelik

    thanks for the help :)

  • George Tzinos
  • ojus kulkarni

    i am trying to run on oneplus A3003device but while running ionic run android it is going to emulator..
    it is not running on my mobile device…
    i tried one more comand – ionic run android target=”ONEPLUSA3003″ still it is not running on device
    can anyone guide me how to run on device

    • Hi ojus. Try this: first unplug your Android device. Then, turn off any emulators. Plug the Android device and type ionic run android.

      • ojus kulkarni

        hey i tried that one, but still it is showing the same message – “no device found running on emulator”
        is there any need to download particular sdk packages…
        right now i am using api 23 marshmallow…

        • I’m assuming you have turned on developer options for your Android device (since you read this article). There are times when I do need to download new SDK’s. Try that. API 23 Marshmallow is old. I’m guessing your ionic and cordova versions in your project are up to date but your Android device’s operating system and your android SDK are not.

          • ojus kulkarni

            ok.. i ll try to add latest version of android api sdk may be then it ll work…

  • Sherry

    I’m running the app in a real device but i encountered an error in which the app icon has been replaced by the ionic icon. I’ve been following the steps in the net but still the error persist. Hope you can help me with my error.

  • Akash

    Thank you for the great post.

    I don’t have android SDK or any Emulator installed in windows 7 system, I am trying to run it on Real Samsung Android Device by connecting to the USB.

    I am getting below error message on running the command: “ionic run android”

    Error:

    Failed to find ‘ANDROID_HOME’ environment variable. Try setting it manually. Failed to find ‘Android’ command in your path. Try update your path to include PATH to the valid SDK directory.

    Thank you.

  • Tamo Ndzeukou

    thanks it’s work for me with HTC one MX