Launch and test an Ionic app: the 4 methods

To launch an Ionic application under development, and test the changes, several methods are possible. The simplest uses the browser, another an emulator, and two others the real mobile.

All methods allow access to a back-end, such as Spring Boot, during development.
From the Ionic application, simply call the server with the IP address of the PC (eg 192.168.x.x).

Method 1: browser

It’s instant, just launch ionic serve.

The application opens in the default browser. In Chrome, just:

  1. open DevTools (F12 key, or ctrl-shift-i)
  2. select mobile icon
  3. select the mobile model

Here, the app is displayed with a behavior close to the mobile, and the live-reload activated by default.

Pros
  •  No configuration.
  •  Direct debugging in the browser, eg. Chrome DevTools
Cons
  •  No native mobile functions
  •  Requires, from time to time, a real test on mobile

Method 2: mobile, with DevApp

This is the easiest way to test on mobile: just install the Ionic DevApp app on the mobile, connected to the same WiFi network as the PC.

Launch ionic serve, then DevApp detects the execution of the Ionic app and displays it, with live-reload enabled:

Pros
  •  Running on the mobile
  •  Up to 6 connected devices
  •  No Android or iOS SDK to install
Cons
  •  Running in the DevApp overlay, so:
    – no access to all native functions
    – no debugging (eg. from Chrome DevTools> Remote devices)
  •  Requires, from time to time, a real test on mobile

Method 3: emulator, with Cordova / Android SDK

This method, like the 4th, is a bit more complex to implement.
See the article dedicated to installing the Cordova, Android Studio and Android SDK environment. TODO: LINK

Once an AVD launched with Android Studio, type the command :
ionic cordova emulate android --livereload --consolelogs

Pros
  •  Comes closer to a real mobile (emulation of native functions, and the environment of a mobile)
  •  Debugging with Chrome> DevTools> Remote devices
Cons
  •  On some PCs, can be slow and unstable
  •  Requires, from time to time, a real test on mobile

Method 4: mobile, with Cordova / Android SDK

Also quite complex to implement, it requires configuring a Cordova, Android Studio and Android SDK platform.
TODO

Once your mobile connected to the PC, launch:
ionic cordova run android --device --livereload --consolelogs

Pro
  •  Access to all native functions, and the environment of a real mobile
  • Debugging with Chrome> DevTools> Remote devices
Cons
  •  Apart from the installation set up, few disadvantages

 

Leave a Comment