Automatic Ionic and iOS Builds with Jenkins and Fastlane

About the Platforms

Ionic Framework

Ionic is one of the best HTML5 mobile app development frameworks available in the market, and it is targeted at building hybrid mobile apps. Ionic uses bunch of technologies that most front-end and web developers are already aware of: HTML5, CSS3, and AngularJS. To learn more about Ionic Framework, please visit: http://ionicframework.com/

Jenkins

Jenkins is a great CI tool used by thousand of companies across the world for Automating build processes, Continuous Integration, and Automated Deployments. Jenkins helps organizations automate every aspect of the development and save the developers precious time. To learn about Jenkins, please visit:https://jenkins-ci.org/

Fastlane

Fastlane is a collection of tools for making your iOS deployments hassle-free and effortless. Fastlane allows developers to connect their deployment tools to streamline iOS (and Android) deployment workflows. To learn about Fastlane, please visit: https://fastlane.tools/

Who should read this article?

You should read this article if you are interested in Continuous integration, love to use the best tools available to get the maximum out of the development process, or are a part of an organization looking at smoothing the build and release process. This article will demonstrate the power of Jenkins for building, packaging, and deploying your iOS apps.

Prerequisites

Some of the prerequisites for this article are:

  • Access to a Mac machine; building iOS apps requires XCode and other tools provided by Apple and can only be installed on a Mac
  • Have XCode and other tools installed and available for build
  • Required certificate and provisioning profiles installed and available for Jenkinds build through Mac keychain
  • All dependencies for building an Ionic app installed on build machine
  • For builds, we are going to use Fastlane, which is written in Ruby, so Ruby should be installed and available globally. This article uses the default system, Ruby 2.0.0p481, that ships with Mac OS X 10.10.5

Setting up builds for your App

Building iOS apps from Jenkins is something that requires access to the Mac keychain, as well as XCode command line tools installed and available globally.

We can split the entire process into the following tasks:

  • Setting up Jenkins (including the required plugins)
  • Installing Node and required Node modules
  • Installing the required build tools
  • Configuring the Ionic project to build with Jenkins and create an iOS package for you

Setting up Jenkins

  • Install the latest Java version from Oracle (the latest version of Jenkins requires at least JDK 7)
  • Install Homebrew if you do not have it already: ruby -e “$(curl -fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)”
  • Install Jenkins using Homebrew: brew update && brew install jenkins
  • Copy the Jenkins plist to “launch agents” folder to start Jenkins at login: ln -sfv /usr/local/opt/jenkins/*.plist ~/Library/LaunchAgents
  • Modify Jenkins plist to allow Jenkins to run as a current user:
    <key>UserName</key>
    <string><User name></string>
    <key>SessionCreate</key>
    <true />
  • Launch Jenkins by running: launchctl load ~/Library/LaunchAgents/homebrew.mxcl.jenkins.plist

Once Jenkins is installed, it should be accessible at: http://<JENKINS_HOST>:8080/

Installing the required Jenkins plugins

Navigate to Jenkins Plugin Manager http://<JENKINS_HOST>:8080/pluginManager/ and install the following Jenkins plugin:

jenkins1
  • Git
  • EnvInject
  • Mask PAsswords Plugin

Installing Node and the required Node modules

Install Node and NPM globally by using the Native packages available at:https://nodejs.org/. You can also use Homebrew to install node on your Mac, by using:

brew install node

Once you have installed Node.js, it is time to install the required node packages globally using npm. Install the following node modules using npm install -g PACKAGE:

  • webpack
  • bower
  • ionic
  • cordova
  • gulp
  • ios-sim@4.1.1
  • ios-deploy

Here is the screenshot of “ionic info” command from the Mac Machine that was used to build the IPA for this article:

jenkins2

Install required build tools

For building our Ionic Xcode project and creating IPA packages for iOS devices from it, we are going to use the awesome tool Fastlanehttps://fastlane.tools/.

In order to do so, you must:

a) Install the following tools for build:

  • xcode-select–install
  • sudo gem install deliver
  • brew install xctool
  • sude gem install fastlane–verbose (this is going to take some time, so sit back and relax)

Once installed, you should see something similar to this: jenkins3

b) -configure build environment

Make sure all of the required credentials, keys, and the Apple Developer Certificate are present in the Keychain that is going to used during builds

Configure Fastlane

Once we are done installing the required dependencies and tools, we need to configure ‘Fastlane’ so that we can use it for our builds.

To configure Fastlane, go to your ionic project directory and execute #fastlane init and follow the instructions on screen. Once you execute ‘fastlane init’, you should be seeing something like this:

jenkins4

Follow along with the instructions coming on your screen, and configure your ‘Fastfile’ and ‘Appfile’ that are used by the Fastlane tool to build your Ionic iOS project.

To learn how to configure Fastlane for your project, please visit https://fastlane.tools/

Once Fastlane is configured for your project, your Fastfile should look like this:

jenkins5

You can download content of this file from: https://gist.github.com/ravishtiwari/a2992634cb7392ac5399#file-fastfile-rb

Configure the Ionic to build with Jenkins

  • Configure a free style project
  • Configure Git and other required project configurations
  • Inject required env variables, such as keychain passwords, required for build
  • From build setup, choose “Execute sheel” and enter your build script content. It should look something like this: jenkins6

You can download the content of the above build script from following Gist: https://gist.github.com/ravishtiwari/a2992634cb7392ac5399#file-ionic-ios-fastlane-sh

Running the Build

Once we have configured both the Jenkins environment and Fastlane for our Ionic project, we are ready to execute the build.

Once Jenkins finished executing the project setup commands (bower install … ionic build ios) and starts executing the ‘fastlane beta’ command, you should see following output on your screen:

jenkins7 jenkins8

Once Fastlane has finished building and signing the IPA for your project, it will start uploading the IPA to Testflight using the credentials provided while setting up the Fastlane.

jenkins9

Once Fastlane has finished uploading your IPA to TestFlight, it will display a message stating the success of TestFlight operation, Fastlane Build stats, etc:

jenkins10

Conclusion

Jenkins is a great and versatile tool. Jenkins has a plugin for all aspects of the build process. Fastlane is a tool that makes your iOS app building, signing, delivery, and almost all aspects of App building and management process effortless. Together, Jenkins and Fastlane make a great combo. You can use Jenkins to manage your builds and Fastlane to build your iOS apps.

If you have any questions related to this article, or want to explore options to use Jenkins for building your Ionic/iOS apps, or any other application, please let us know and we will help your team get the maximum out of your build process.

Quick References

Sample of scripts used for this article: https://gist.github.com/ravishtiwari/a2992634cb7392ac5399

security find-identity -p codesigning -v : List available identities

security list-keychain : List keychain

security unlock-keychain -u : unlock keychain

Ravish Tiwari

Ravish Tiwari

Technical Lead

Ravish is an AWS certified cloud solutions architect and developer. With more than 10 years of experience in IT with clients spread across Europe and US, he brings real-life solutions to resolve issues related to cloud, DevOps, web application development. He has managed and designed solutions for several LAMP, Hybrid Mobile and AWS projects. His cloud and DevOps experience include working on Serverless Applications for AWS Platform, Setting up DevOps Pipeline in a Serverless Application Environment, hybrid mobile application development and Web Application development. He is also a Zend Certified Engineer.

11 Responses to “Automatic Ionic and iOS Builds with Jenkins and Fastlane”
  1. Sylvain on

    Just “thank you”

    Reply
  2. sanjeev on

    where are the passwords store when I was configuring the fastlane…

    Reply
  3. cris on

    Hi, great tutorial. i was just wondering if you have something for android as well (also ionic)

    Reply
  4. Anant on

    Hi Ravish,

    At the moment I am using Xcode to build the ipa and I want to use fastlane tool to upload it on iTunesConnect and enable it automatically for internal user.

    I have tried deliver, it upload the build, But not enable it for internal users.

    Can you please help me

    Reply
  5. Ashwani on

    Hi Ravish,

    I want to modify capability option in xcode through the fastlane like push notification, background modes etc

    can you please help me

    Reply
  6. Prabin Yovan on

    Thank you for the great tutorial.

    I just found a type (the) “Installing teh required build tolls”

    Reply
  7. Harry Paten on

    This article is very nice and helpful, I really like this article. We also provide hotmail sign in

    Reply
Leave a Reply