Build Ionic App For Android On Mac

IMPORTANT: You will need to update APPID in the example above to reflect the APPID for your own application. You can find this by logging in at ionic.io. Generate Certificates and Create a Security Profile. In order to build for both iOS and Android, you will need to create a security profile.This profile will contain the necessary information to sign your applications. Create your own Spotify style music streaming app with Ionic 4 template. Integrate your app with any back-end and publish to stores.

Home / Insights / Automatic Ionic and iOS Builds with Jenkins and Fastlane

About the Platforms

Ionic Framework

Ionic Android Build

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:

Build
  • 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:
  • 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:

  • 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:

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:

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:

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:

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:

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:

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

App For Samsung

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:

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.

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

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

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.

BuildSylvain on

Just “thank you”

ReplyRavish Tiwari on

Hi Sylvain,

Thank you for your interest and I hope you find this article useful.

-Ravish

Replysanjeev on

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

ReplyRavish Tiwari on

Hi Sanjeev,

For the build purpose we are using Mask Password plugin : https://wiki.jenkins-ci.org/display/JENKINS/Mask+Passwords+Plugin

Rest other certificates and credentials are stored in Keychain and in the Fastlane configurations you specify the apple id that should be used for build

Replycris on

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

ReplyAnant 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

ReplyAshwani 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

IonicReplyPrabin Yovan on

Thank you for the great tutorial.

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

ReplyRavish Tiwari on

Thanks for notifying us, text updated.

ReplyMichael Busby on

Thank you for the tutorial! I haven’t completed yet but I wanted to point out that as I’m going through it, many of the commands are incorrect, especially the xcode ones. Causing me to need to look up the correct ones.

Also, in the section “INSTALL REQUIRED BUILD TOOLS,” sudo is misspelled as sude.

Reply
Leave a Reply
-->

The App Center Build service helps you build Android, iOS, macOS, and UWP apps using a secure cloud infrastructure. Connect to your repo in App Center and start building your app in the cloud on every commit. With Build you can forget about configuring build servers locally, complicated configurations, and code that builds on a coworker's machine but not yours.

With App Center's other services, you can further automate your workflow:

  • Automatically release builds to testers and public app stores with App Center Distribute.
  • Run automated UI tests on thousands of real device and OS configurations in the cloud with App Center Test.

Getting Started

To get started using the Build service, you'll first need to connect to a source control system. On the Build getting started dashboard, select the repository where the app is located and then select the branch to be built. App Center currently supports building apps in Git repositories hosted on:

  • Azure DevOps (formerly Visual Studio Team Services or VSTS)
  • Bitbucket
  • GitHub
  • GitLab

App Center doesn't support Team Foundation Version Control (TFVC).

If you're having trouble with your builds, check the troubleshooting guide or you can always reach out and let us know by opening a support ticket. Select the help menu (?) in the upper right corner of App Center portal, then choose 'Contact support'. Our dedicated support team will respond to your questions and feedback.

Note

App Center build artifacts and logs are kept for 30 days after build completion.