Ionic 4: Live On-Device Testing with Ionic DevApp

You guessed it. The first step is to head over to your respective App Store and download the Ionic DevApp application. Here’s a link for iOS and Android.

Great. Most of the hard work is now already done. Open the application up and you’ll be prompted to log in to your Ionic account.

If you haven’t created an Ionic account, now’s the time to head over to the sign up page and do so.

We’ll then need to create a new Ionic project to run on our phone. Let’s go ahead and make a new Ionic/Angular project to demonstrate this:

# Ensure you have the Ionic CLI installed
$ npm i ionic -g

# Create a new Ionic project with the name of your choosing
$ ionic start ion-devapp blank

# Open inside of VS Code and Serve the project
$ code . && ionic serve -c

You should now have an application running on http://localhost:8100 and this can be accessed in the browser. Head back over to Ionic DevApp and you should hopefully see your application in the list.

Uh oh. I’m currently writing this in my local Costa coffee and I don’t see my application in the list. What do I do?

Thankfully, we can enter the address manually by hitting the side menu and selecting Enter address manually.

Remember the Developer server running! message we got whilst running ionic serve -c? We’ll need the external address:

[INFO] Development server running!

    Local: http://localhost:8100
    External: http://10.108.90.28:8100

We should now see our application on screen. If you still don’t see your application at this stage, ensure you’re connected to the same WiFi network.

We can now make changes to our application and we’ll see it instantly on screen! The magic of modern web development.

There is a slight limitation with Ionic DevApp, and that’s the fact that it doesn’t support all Cordova plugins. I would therefore not recommend using Ionic DevApp as the main way to debug your Ionic applications that take advantage of native features.

You can see a full list of supported plugins here.