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
- 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).
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.
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:
- 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.
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.
`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”
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”