Jump to Section
    Oct 12 2018

    How to Develop, Deploy and Test Ionic Apps

    Testing Ionic apps on real iOS and Android devices


    A challenge faced by many mobile app developers is needing to have specialized skills for each platform. iOS and Android each have completely different development environments. Thankfully, today we have the ability to use cross-platform development environments which lets you write an app once and publish it to any mobile platform. The framework we will be looking at is the Ionic App framework. Please follow our step-by-step guide to installing and setting up your system to build Ionic Framework apps.

    What is Ionic?

    Ionic apps makes it easy to build high-performance mobile and Progressive Web Apps (or PWAs) that look and feel beautiful on any platform or device.

    Ionic’s open source Framework and developer-friendly tools and services power apps for some of the world’s best-known brands - from highly successful consumer apps like Sworkit, Untappd, and Dow Jones MarketWatch, to mission-critical apps supporting Nationwide, Amtrak, and NASA.

    The open-source Ionic App Framework features a rich library of front-end building blocks and UI components that make it easy to design beautiful, high-performance mobile and Progressive Web Apps (or PWAs) using web technologies like HTML, CSS, and JavaScript.

    Setup & install

    Node & npm

    To build Ionic Framework apps, the only requirement is a Node & npm environment. Go to Node’s download page to select and download the LTS version to ensure the best compatibility.

    Node is bundled with npm, the package manager for JavaScript. To verify the installation, open a new terminal window and run:

    node --version
    npm --version

    Install Ionic CLI

    Now that Node.js and npm are installed, install the Ionic CLI globally with npm:

    npm install -g ionic

    Note: If you have an issue with the permission for installation with ionic, please run the command with sudo.

    Login to your Ionic Account from the CLI

    Make sure you have an account on Ionic. If you don't have once, access to https://ionicframework.com/ and create an account.

    In order to take advantage of the additional services provided by Ionic Pro you’ll want to login.

    ionic login

    If you have already logged in ionic, the console will show:

    [WARN] You are already logged in as joeybrown@kobiton.com! Prompting for new credentials.

    Create your app

    Create an Ionic app using one of our pre-made app templates. The three most common starters are the blank starter, tabs starter, and sidemenu starter.

    In this tutorial, I will create an Ionic app using our “Tabs” app template. To begin the installation, open a new terminal window and run:

    ionic start photo-gallery tabs

    Type “y” and press Enter. Project setup may take a few moments.

    Would you like to integrate your new app with Cordova to target native iOS and Android?

    Enter Y during the prompt if you’re intending to target iOS & Android.

    Install the free Ionic Pro SDK and connect your app?

    Ionic Pro is a set of tools that help you manage the lifecycle of your Ionic apps, including runtime error monitoring and troubleshooting, building and distribution native binaries, and deploying live updates and bug fixes right from the Ionic dashboard. It’s completely free to get started and comes with your Ionic account.

    Enter Y during the prompt to connect your app to Ionic Pro.

    Which app would you like to link?

    Select Create a new app and give it a name when prompted. Note: I created a new app, so I will link an existing app on Ionic Pro 

    Which git host would you like to use?

    You can push you code directly to Ionic via our git host over SSH or you can link your app to GitHub or other supported third party git hosts and we can access your changes from there.

    If you are not using GitHub you can push your source code directly to Ionic Pro using Git. Simply choose Ionic Pro as your git remote during the prompt.

    That’s it! Now, you have created your own app.

    Next, go to your newly created project:

    cd photo-gallery

    Run the app

    Run this command next:

    ionic serve

    Your Ionic app is now running in a web browser. Most of your app can be built right in the browser, greatly increase development speed.

    To end ionic serve use Control + C.

    Build a Native Binary

    Build native apps in the cloud for iOS / Android with the right dependencies every time.

    You can access https://dashboard.ionicframework.com/apps to see more guide.

    However, I will focus on how to build an debug file on the Terminal window.

    To generate an APK file, run:

    ionic cordova build android --verbose

    The output looks like:

    Built the following apk(s): 

    To generate an IPA file, run:

    ionic cordova build ios --device --verbose

    The output looks like:


    Testing your apps on real devices

    In this part, I will guide you how to use Kobiton Cloud to test your apps. A Kobiton account is required to access Kobiton system. If you do not have a Kobiton account yet, go ahead to create a free trial account and sign in. It takes just a few moments.

    • Uploading Mobile Apps to Kobiton Store for Testing
    • Launch a manual test with your expected device
    • Modify your desiredCaps to automate your app with the expected device
      • You can set your test to reference the application at the Kobiton Storage URL with the app capability, as shown in this example for Java.
      • DesiredCapabilities capabilities = new DesiredCapabilities();
        capabilities.setCapability("app", "kobiton-store:1024"); 
        capabilities.setCapability("deviceGroup", "KOBITON"); 
        capabilities.setCapability("deviceName", "Galaxy S8+");
        capabilities.setCapability("platformVersion", "7.0");
        capabilities.setCapability("platformName", "Android");
      • DesiredCapabilities capabilities = new DesiredCapabilities();
        capabilities.setCapability("app", "kobiton-store:1024");
        capabilities.setCapability("deviceGroup", "KOBITON");
        capabilities.setCapability("deviceName", "iPhone 6");
        capabilities.setCapability("platformVersion", "10.3.3");
        capabilities.setCapability("platformName", "iOS");

    Accelerating Deploying and Testing Mobile Apps