Nowadays, providing “Live Editing” for development is a BIG HIT to every development platform or framework. Ionic framework also provide powerful tools to help doing live editing in several levels of the development process, including:

  • Browser Testing – by ionic serve.
  • Emulator Testing – by ionic emulate
  • Device Testing – by ionic run.

And here is how to use them. After this, we will also introduce some other tools that Ionic provides to help your development life even easier, like Ionic Upload and Ionic View.

Current Ionic CLI version: 1.7.13.

General Testing Procedure

Typically, while doing Hybrid Mobile development, there are three steps of testing we need to follow:

  • Test on browsers (desktop or device) – It is generally the fastest way to help see the changes and issues while doing development actively.
  • Test on emulator – The emulator provides the “device-closed” emulation env. to help test drive the majority of the functionality of your app.
  • Test on device – It is a must step before you go to production. And also this is the only way if your app requires some device-specific features (like camera, location service, etc.).

LiveReload

While testing, Ionic uses LiveReload to help monitor the code changes (mainly inside www/ folder) and automatically refresh the app so that you can view the app changes instantly.

To change the monitoring folders, you can specify a watchPatterns property in the ionic.project file located in your project root. For example:

{
  "name": "ionic-boilerplate",
  "app_id": "",
  "watchPatterns": [
    "www/**/*",
    "!www/lib/**/*"
  ]
}

LiveReload will monitor the code changes inside the whole www/ directory, excluding www/lib/.

Gulp Integration

Ionic also can integrate Gulp tasks before or during the testing process by using the following properties in the ionic.project file,

  • gulpDependantTasks – gulp tasks that are run before ionic testing tool launches.
  • gulpStartupTasks – gulp tasks that are run and kept alive during testing (with LiveReload).

For example,

{
  "name": "ionic-boilerplate",
  "app_id": "",
  "gulpStartupTasks": [
    "build",
  ],
  "gulpStartupTasks": [
    "sass",
    "watch"
  ],
  "watchPatterns": [
    "www/**/*",
    "!www/lib/**/*"
  ]
}

It will invoke gulp build before the testing starts and always call gulp says and gulp watch during the testing.

Test on Browsers

Ionic uses CLIionic serve to help do testing on browser, either desktop browsers or device browsers. When using ionic serve, it starts a local development server to host the app and then you can view it from a desktop browser or a device browser.

By default, the CLI starts LiveReload to help do live editing.

Specifically, if you are doing development for both iPhone and Android Phone, the feature Ionic Lab provided by ionic serve can really help you a lot. It provides a single page to include both iPhone and Android Phone app presents side-by-side. Here is the CLI:

ionic serve --lab

Ionic Serve Lab

Here is the full list of options that ionic serve supports.

[--consolelogs|-c]  .....................  Print app console logs to Ionic CLI
[--serverlogs|-s]  ......................  Print dev server logs to Ionic CLI
[--port|-p]  ............................  Dev server HTTP port (8100 default)
[--livereload-port|-r]  .................  Live Reload port (35729 default)
[--nobrowser|-b]  .......................  Disable launching a browser
[--nolivereload|-d]  ....................  Do not start live reload
[--noproxy|-x]  .........................  Do not add proxies
[--address]  ............................  Use specific address or return with failure
[--all|-a]  .............................  Have the server listen on all addresses (0.0.0.0)
[--browser|-w]  .........................  Specifies the browser to use (safari, firefox, chrome)
[--browseroption|-o]  ...................  Specifies a path to open to (/#/tab/dash)
[--lab|-l]  .............................  Test your apps on multiple screen sizes and platform types
[--nogulp]  .............................  Disable running gulp during serve
[--platform|-t]  ........................  Start serve with a specific platform (ios/android)

Test on Emulator

Ionic uses CLIionic emulate to help deploy the app to the specified platform emulators.

ionic emulate [platform] [options]
# E.g. ionic emulate iOS -l -c -s

By default, LiveReload is NOT enabled. You need to specify --livereload or -l to enable it.

Here is the full list of options.

[--livereload|-l]  ........................  Live reload app dev files from the device (beta)
[--address]  ..............................  Use specific address (livereload req.)
[--port|-p]  ..............................  Dev server HTTP port (8100 default, livereload req.)
[--livereload-port|-r]  ...................  Live Reload port (35729 default, livereload req.)
[--consolelogs|-c]  .......................  Print app console logs to Ionic CLI (livereload req.)
[--serverlogs|-s]  ........................  Print dev server logs to Ionic CLI (livereload req.)
[--debug|--release]  ......................  
[--device|--emulator|--target=FOO] 

Specify “Device” and “Version” of Emulator

Simply running ionic emulate will automatically loads the “first” available emulator (the default device type and OS version from Xcode or Android AVD Manager). To specify it, use --target option, like ionic emulate ios --target="iPhone-6-Plus, 9.0" or ionic emulate android --target="emulator-5556".

If doing iOS development, be sure to install NPM plugin iso-sim first by npm install -g iso-sim.

On iOS, run iso-sim showdevicetypes in the Terminal to get the full list of available iOS device and version on your machine, such as:

iPhone-5s, 9.0
iPhone-5s, 9.2
iPad-2, 9.0
iPad-2, 9.2
iPad-Retina, 9.0
iPad-Retina, 9.2
iPad-Air, 9.0
iPad-Air, 9.2
iPhone-6, 8.4
iPhone-6, 9.0
iPhone-6, 9.2
iPhone-6-Plus, 8.4
iPhone-6-Plus, 9.0
iPhone-6-Plus, 9.2
iPhone-6s, 9.0
iPhone-6s, 9.2
iPhone-6s-Plus, 9.0
iPhone-6s-Plus, 9.2
iPad-Air-2, 9.0
iPad-Air-2, 9.2
iPad-Pro, 9.2
Apple-TV-1080p, tvOS 9.1
Apple-Watch-38mm, watchOS 2.1
Apple-Watch-42mm, watchOS 2.1

On Android, run add devices -l to list all available device IDs.

When trying to deploy the app to an iOS emulator, make sure the emulator is initialized already. Otherwise, you may need to stop the current process and run it one more time.

Network Error on Android Emulator

If using LiveReload against Android emulator, you may see this Network Error if running latest Cordova.

Network Error on Android Emulator

To fix it, install Cordova plugin Cordova Whitelist and add <allow-navigation href="*" /> to config.xml.

Please NOTE, The above example will whitelist the entire network, and as such is NOT recommended for a production application, though it’s just fine in testing.

Reference: [http://docs.ionic.io/docs/cordova-whitelist

Test on Device

Similar to do testing on Emulator, Inoic CLI uses ionic run to help deploy the app to the specified platform devices.

ionic run [platform] [options]
# E.g. ionic emulate iOS -l -c -s

Be sure to install NPM plugin iso-deploy first by npm install -g iso-deploy.

If ionic run cannot find a valid connected device, it will turn to a emulator instead.

The available options are identical to ionic emulate.

[--livereload|-l]  ........................  Live reload app dev files from the device (beta)
[--address]  ..............................  Use specific address (livereload req.)
[--port|-p]  ..............................  Dev server HTTP port (8100 default, livereload req.)
[--livereload-port|-r]  ...................  Live Reload port (35729 default, livereload req.)
[--consolelogs|-c]  .......................  Print app console logs to Ionic CLI (livereload req.)
[--serverlogs|-s]  ........................  Print dev server logs to Ionic CLI (livereload req.)
[--debug|--release]  ......................  
[--device|--emulator|--target=FOO] 

Due to this thread, in the current version of Ionic CLI (1.7.13), the only way to launch the app in iOS device is ionic run ios --device. Using the normal command will directly go to emulator.

iOS Code Signing

On Android, running ionic run android -l -c should be enough for you to go in the real practice. However, on iOS, we need to take care of the iOS code signing first.

The configuration is done inside the file config.xml from Cordova.

<!-- Set deploy target SDKs for release and debug builds -->
    <preference name="ios-XCBuildConfiguration-IPHONEOS_DEPLOYMENT_TARGET" value="9.1" buildType="debug" />

    <!-- Custom code signing profiles (overriding those already in /ios/cordova/*.xcconfig -->
    <preference name="ios-XCBuildConfiguration-CODE_SIGN_IDENTITY" value="Custom Developer" buildType="debug" />
    <preference name="ios-XCBuildConfiguration-CODE_SIGN_IDENTITY[sdk=iphoneos*]" value="Custom Developer (All iOS SDKs)" buildType="debug" />
    <preference name="ios-XCBuildConfiguration-CODE_SIGN_IDENTITY[sdk=iphoneos9.1]" value="Custom Developer (iOS 9.1)" buildType="debug" />

To help manage config.xml file, recommend to use the Cordova plugin cordova-custom-config.

Other Ionic Tools

Besides the above development tools, Ionic also provides some useful tools to help facilitate the development process, such as:

  • Ionic Upload – By using ionic upload (under project root), Ionic CLI will connect and upload your app to ionic.io service. After this, you can view this app via the mobile app Ionic View.
  • Ionic View – A mobile app (on both iOS and Android) that can view apps that you uploaded to ionic.io or are shared by others.
  • Ionic Creator – An online service that helps you build the app UI.

Ionic View App

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>