Automate your Ionic package build with wercker

In the previous post we looked at how to automate firebase deployments with wercker. Today we’re having a look at how wercker can be used with Ionic to simplify the building of your mobile app packages (*.ipa, *.apk, etc.).

Prerequisites

  • An Ionic project in wercker
  • The Ionic CLI available in your wercker pipeline. You can either install it via a script step (npm i -g ionic@beta), or use a Docker image with it pre-installed. I created the devillex/docker-ionic image for easy reuse.
  • An account on Ionic.io, with your Ionic App set up

Ionic Login Step

The first step in the upload to Ionic.io is to log into your Ionic account via the CLI. This is done via the command line as follows:

Example Ionic login command

To simplify this step for usage with wercker I created a custom step: devillex/ionic-login

The step will allow you to log in with your Ionic.io credentials. The reason I created separate step for the login is so that we don’t need to log in multiple times when uploading packages for different platforms, such as ‘ios’ and ‘android’.

The step takes two arguments required for the authentication process:

  • email: Your Ionic.io email
  • password: Your Ionic.io password

Ionic Package Build Step

Now that we’re logged in, we can proceed to upload our project for packaging. This is achieved via the ‘ionic package build’ command of the CLI. The following is an example that submits the project to be built for iOS, using a security profile defined via Ionic.io:

I also created a custom step to simplify this part of the process: devillex/ionic-package-build

The package build step takes the following parameters:

  • platform: The platform that is targeted by this package, i.e. ‘ios’ or ‘android’
  • release: (Optional) Indicates whether this is a release build, as opposed to a debug build. Possible values are true or false. Defaults to false.
  • profile: (Optional) The security profile as defined on Ionic.io

Complete wercker.yml example

The following Gist provides an example of a complete wercker.yml example:

In the above example we log into the Ionic.io platform and submit the project for packaging on both the ‘ios’ and ‘android’ platforms, using the ‘development’ security profile.

Obtaining built packages from Ionic.io

The packages submitted to Ionic can be downloaded via Ionic.io, or via the CLI using the ‘ionic package download’ command. You can also issue the ‘ionic package list’ command to check the status of the builds, or to view the latest 25 builds.

Conclusion

In this post we had a brief look at how wercker can be leveraged to automate the packaging of releases for Ionic Mobile Apps. With this setup it’s fairly straight forward to configure push-to-deploy (package).

With wercker and Ionic.io caring about building the packages, you are left to focus on building your next amazing app. :)

Update — 14 October 2016

After upgrading the Ionic CLI used in the docker image (devillex/docker-ionic), we found that our packages were created without containing any of our code and resources. Upon closer inspection it was found that the build was actually not running the build steps, which in turn caused us to submit an empty folder for packaging with Ionic.io.

What the root cause was, is that prior to v2.1 of the Ionic CLI, the ‘ionic build’ command uses gulp to build the project. This can be seen below in the gist depicting the console output captured from the build command using Ionic CLI version 2.0.0-beta.37.

Part of the changes in Ionic RC (CLI version 2.1.0-beta.2) is that the project is now built with npm scripts and a custom npm package containing all the build scripts called ‘ionic-app-scripts’, which is similar to the approach of the Create React App project. If like us, you haven’t yet migrated the gulp configuration to npm scripts, this change results in the CLI trying to run the build via an npm build script (which doesn’t exist). Basically no project build takes place, and resulting console output looks like this:

Luckily you can still use the newer version of the CLI with a minor tweak to your package.json. All you need to do is add a some npm scripts as follows:

Prior to Ionic CLI v2.1

npm scripts prior to Ionic CLI v2.1

After CLI Ionic v2.1

npm scripts after Ionic CLI v2.1

Then you can update your wercker configuration to build your project using npm build, which will work regardless of your CLI version.

I have subsequently updated the gist under the Complete wercker.yml example section above to replace ‘ionic build’ with ‘npm run build’ in the wercker build pipeline.