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:
- open DevTools (F12 key, or ctrl-shift-i)
- select mobile icon
- select the mobile model
Here, the app is displayed with a behavior close to the mobile, and the live-reload activated by default.
- No configuration.
- Direct debugging in the browser, eg. Chrome DevTools
- 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:
- Running on the mobile
- Up to 6 connected devices
- No Android or iOS SDK to install
- 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
- Comes closer to a real mobile (emulation of native functions, and the environment of a mobile)
- Debugging with Chrome> DevTools> Remote devices
- 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
- Access to all native functions, and the environment of a real mobile
- Debugging with Chrome> DevTools> Remote devices
- Apart from the installation set up, few disadvantages