Automated Deployment Of Ionic Apps

Guide: Automated Deployment Of Ionic Apps

Building an app with Ionic is simple, you have a working prototype on your device in no time. However, this version is not ready to be published to the store or put in a CI environment. In order to have your Angular app built and distributed, there are a lot of steps to be done.

  • Managing dependencies
  • Building the Angular app for different environments
  • Unit testing
  • Documentation
  • Creating, maintaining the Xcode and Android projects
  • Code signing hell
  • iTunes Connect and Google Play Console
  • Screenshots, metadata

Our setup takes care of all these and it can be started from Jenkins (or other CI).

Development Workflow

The Angular Project

For creating the project structure for the app we used the Angular Seed. This already comes with tools, which help with building and testing.

Dependency Management

We use npm for managing node modules and bower to manage the project’s dependencies. We have a private bower instance, so we can share components between projects.

Building The Angular App

The development is following the Angular Seed recommendations. We used Grunt to build the app, you may as well use Gulp instead.

The magic happens in the Gruntfile/Gulpfile:

  • lint for javascript and less
  • uglify all bower components into a single file
  • uglify all application script
  • create minified css from the less files
  • run all unit tests
  • create documentation from code comments using ngdocs
  • check code style with eslint
  • copy the result to the ionic project and increase the build number of the apps

Building The Ionic Projects

Using the package.json and ionic.project files we store all plugins, dependencies and their configuration. With the command `ionic state restore` we can recreate the iOS and Android projects.

If the icons or the launch screen graphic have changed, the `ionic resources` command will update them.

$ ionic state restore
$ ionic resources

It is very important that you do not make any manual modifications to these projects, it would be overwritten the next time you generate it.

Deployment

We use the fastlane tools for deploying the apps. These tools are not only helpful for uploading the apps to the respective stores, but they manage metadata and screenshots as well.

iOS

`gym` is the tool for archiving and packaging the iOS app. It creates a signed .ipa file. Then `deliver` uploads the app and all metadata to the iTunesConnect.

$ gym \
 — project “ionic/platforms/ios/MyApp.xcodeproj” \
 — output_directory “dist/ios” \
 — scheme “MyApp” \
 — configuration “Release”
$ deliver

Android

The Ionic framework already creates an .apk file, but it still has to be signed and uploaded.

Signing the package:

$ jarsigner \
 -verbose \
 -sigalg SHA1withRSA \
 -digestalg SHA1 \
 -keystore dist/android-release-key.keystore \
 -storepass MyStorePass \
 dist/android/MyApp-unsigned.apk \
 alias_name

Zip align tool to optimise the apk:

$ ~/Library/Android/sdk/build-tools/23.0.2/zipalign \
 -v 4 \
 dist/android/MyApp-unsigned.apk \
 dist/android/MyApp.apk

Once we have the final apk in place, time to upload to Play Store using fastlane’s supply command..

$ supply run \
 — key “dist/fastlane-google-console-access-keystore.p12” \
 — apk “dist/android/MyApp.apk”