Tutorial

Ionic 4: Live On-Device Testing with Ionic DevApp

Published on April 1, 2019
    Ionic 4: Live On-Device Testing with Ionic DevApp

    While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

    Cables. Who needs them? Not you, because you’re using Ionic DevApp! This is an awesome application available on the iOS and Android stores that allow you to test your Ionic applications on the device, quickly and easily.

    Better yet - all changes that you make from within your editor are shown inside of the application almost instantly. What more could you need?

    Let’s look at how we can get up and running with Ionic DevApp.

    Installing 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.

    Using Ionic DevApp

    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.

    Log in

    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.

    Ionic DevApp application 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
    

    Enter your address manually

    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.

    Limitations

    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.

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about us


    About the authors

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    Leave a comment
    

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel