At gfnork we build applications for ionic. Putting the general discussion about hybrid apps and ionic aside, something that has traditionally been a pain in the *** for hybrid apps is the toolchain. The config.xml vs package.json confusion for cordova plugins will probably soon come to an end, but when we started developing ionic applications we were very surprised that while development itself was smooth sailing, the build toolchain was a thing that came straight from hell.

We spent days figuring out why in 50% of the cases, plugins would not install properly, or looked like they would install properly, but finally wouldnt work on real devices, why XCode would not allow us to build the solution or how to put important parameters in the AndroidManifest.xml automatically.

Fortunately, today a bunch of very good solutions exist to ensure that you don’t have to go beserk when handling deployment, and one essential part of this are continous integration & deployment tools.

For this post we looked into the oldschool contester Jenkins CI, Adobe Phonegap Build and a tool we recently discovered, GreenhouseCI.

Adobe PhoneGap Build

The good parts:

Phonegap Build comes with a nice CLI that makes deployment really easy.

Just run

phonegap remote build android

and the CLI takes care of everything else.

Adobe offers a free tier of Phonegap build that allows you to build one app, which should be sufficient for most private enthusiasts and even early stage start-ups. Phonegap build allows building of Android APKs, IOS IPAs and Windows XAPs, so it gets you covered even if you don’t have a mac or windows computer.

The bad parts:

Cordova and Phonegap have a somehow tricky relationship to each other. Phonegap is based on Cordova, which in theory should make an app built for cordova also compatible with phonegap. In reality, there is a large collection of tiny but really annoying differences between the two. The way cordova and Phonegap manage their platforms and plugins in the config.xml is different, which means that your cordova app won’t run with plugins directly if you switch to phonegap. Also splash screens and icons are handled differently in cordova and phonegap, which adds to the confusion. (Phonegap requires you to add splash and icon images in the www folder of you app, while cordova is cool with putting it in a folder that will not end up in your build.)

In conclusion all of this means that if you decide to use phonegap build, you should migrate your project to phonegap completely.

For science, I changed the config files from cordova to phonegap build, so I could produce at least one successful build. Migrating plugins and platforms was already kind of painful, because out of some weird reason phonegap uses the <param> tag for plugin variable storage, while cordova uses the <variable> tag. Out of some reason, the screen orientation lock stopped working after migration to phonegap and I couldn’t get it back to work without unreasonable effort.

What was left to do was to set

<preference name="android-build-tool" value="gradle" />

in the config.xml to tell phonegap build to use gradle to build, then the builds succeeded. Splash screen and icons were still not set correctly, but after making the changes mentioned above, they also showed up in my application.

Apart from these annyoing differences between phonegap and cordova, we found the features offered in Phonegap build for automation a little lacking as well. Phonegap build offers a REST API but has no built in features to auto-publish to Google Play, Itunes Connect, or other distribution services. You would need to build something yourself in order to automate Phonegap Build to e.g. build and distribute nightly builds.

Greenhouse CI

The ionic configuration at greenhouse runs the following commands

• ionic hooks add
• ionic platforms rm <android/ios>
• ionic platforms add <android/ios>
• ionic build <android/ios>

The good parts:

Greenhouse CI has a very clean UI, autodetection of you project platform and tracks the last builds performed complete with changelog and build issues. It’s a product that does a lot for you and presents what it does in a neat way.

Greenhouse CI allows building of Android APKs & IOS IPAs, but no windows XAPs, but I guess that most developers can cope without windows these days.

Automated publishing also adds to the essential features included, publishing is possible via Email, Google Play, Itunes Connect, HockeyApp, Crashlytics, Relution, TestFairy, Slack & Hipchat.

During our test, we used Google Play, Itunes Connect, Slack and HockeyApp without any issues. We uploaded the provisioning profiles & certificates and things just worked.

Greenhouse also includes webhook notifications as both source and sink, allowing it to plug in to nearly every other system you want it to connect to.

Also support via intercom is fast and competent, one of their developers helped me resolve an issue we discovered with ionic deployment and took a lot of his time to get things running.

Greenhouse also offers a free plan that allows building of 2 apps, but without team collaboration. Fortunately this is more than sufficient for private users and small early startups.

The bad parts:

Some details for cordova based projects are still kind of fresh. Currently Greenhouse runs on node v6.2.1 and the version is not configurable from the UI, which resulted in some weird errors on our CI system, as ionic is still not fully nodejs 6 compatible. Fortunately the greenhouse support team helped us out with this one, using custom build scripts we were able to manually set the nodejs version to LTS

We encountered a couple of other small issues with regards to ionic, especially with regards to the build hook scripts used by ionic during plugin installation, but were able to resolve all issues with custom build scripts that we supplied to the Greenhouse CI system.

Our script looked like this and runs during GH_POST_CLONE_SCRIPT:

#!/bin/sh
npm install -g n
n 4.4.7
npm install -g gulp
cd $GREENHOUSE_BUILD_DIR/roadatlas_ionic
npm install
ionic state reset
gulp

Instructions on how to use these custom build scripts can be found here. The bad news is that some amount of tinkering needs to be done, the good news within the bad news is that it’s possible to make custom adjustments without much effort.

Testing is currently not supported for ionic projects, but will probably be included in the future.

Setting up nightly builds is a little tricky, since greenhouse doesn’t offer a built in feature for that (In our case, we only wanted device builds once per day), so we had to set up a script on a server that would ping Greenhouse once per day to start a build.

Jenkins

Jenkins is a general purpose CI that can build a lot things, from backends, to frontends, to theoretically everything. The capabilities of Jenkins to build & deploy IOS depend on the platform its deployed on. Only Mac computers can build IOS, so you’d need a mac server somewhere to let jenkins build IOS IPAs.

The good parts

Jenkins is highly customizable. There is nothing you cannot do with jenkins or a plugin for jenkins. Web hooks, publishing, nightly you have it all covered with jenkins. You need to install the Android SDK in your build environment, nodejs, and the ionic CLI and you can start building. We even set up a build step that would publish our ionic app to a FTP server so we could test new builds in the browser as well.

If you want to set up nightly builds, just check Poll SCM in Build Triggers and enter

0 0 * * *

inside the “schedule” text box.

Jenkins is also so much more than just a tool to run your builds, it can run and show reports for your tests as well, but we don’t cover that in this article.

The bad parts

You have to put some brainwork into it and you can’t run IOS builds if you don’t have an apple build server available somewhere or are running jenkins on a apple operating system. Jenkins is somehow complicated to set up (at least compared to the other two hosted solutions), but comes with the benefit of being able to run everything within your premises (if that is a requirement). You need a server to host jenkins, but limited free jenkins hosting is available on Openshift.

Wrapping Up

	PhoneGap Build	Greenhouse CI	Jenkins CI
IOS Builds	yes	yes	only if building on Mac
Android Builds	yes	yes	yes
Setup complexity for ionic	needs addition of phonegap configs	works almost out of box	manual set up necessary
Auto-Publishing	not available	lots of different publishing providers available	lots of different publishing providers available through plugins
Triggers	available	available	available
Free Plan	1 private app	2 private apps	not applicable

Overall, this article only provides a brief overview about three possible tools to run regular builds on your ionic application. Phonegap Build and Greenhouse offer free builds for IOS, and it’s great to see that there is more choice for developers now when it comes to build tools for ionic & cordova applications.

If there are any other tools out there that offer automated builds for cordova & ionic that we missed, please comment and tell us about them!