Fastlane Screencast

Videos and tutorials for all of your fastlane needs

Integrate fastlane into your Ionic Framework build process

June 7, 2017 tutorial video 1

Preface

Building cross platform mobile applications (multiple platforms with one codebase) with web technologies is the ideal solution for many products and Ionic makes it easy get started. Ionic handles a lot of the heavy lifting of making a smooth and stylized cross platform mobile application. If you haven’t checked out what Ionic is all capable of, please head over to Ionic Showcase to see what people have made with it.


Installed Tool Versions

Below is the version of tools that were used in the making of this blog post and video.

  • Ruby – v2.3.4
  • NodeJS – v6.8.1
  • npm – 3.10.8
  • fastlane – v2.50.1
  • Ionic – v3.6.0
  • Cordova – v7.1.0

Assumptions

In this tutorial, I will be assuming some previous knowledge of creating, provisioning apps, and distributing/publishing apps for iOS and Android. We will be using producecert, and sigh.

I will also assume that you have all proper iOS and Android development tools installed.

Tutorial – iOS

Today we are going to take a look at combining the power of Ionic and with the power of fastlane. We will create a sample Ionic app (from the Ionic tutorial), add fastlane into our project, and build iOS and Android apps for testing and/or distribution.

Install Ionic and Create Sample App

We will be following everything on Ionic’s Getting Started page. This will get us an sample “tabs” app that we will use for building our packaged iOS and Android apps.

Congrats! At this point, you should have a sample Ionic app running in your web browser that looks something like this:

Setup fastlane

See our standard Setup fastlane page to get fastlane setup in this project. At the end of this, you should have a Gemfile and a fastlane directory with a Fastfile and a .env file.

Configure Ionic App

Open config.xml and edit the widget id. This widget id is the iOS bundle name and the Android package name. We will rename ours for this tutorial to “com.fastlanescreencast.FastlaneScreencast”

Build iOS IPA

We will be using four core fastlane tools as the backbone for building a release IPA for our Ionic app: producecert, and sigh. produce will create the app in the iOS Developer Center. cert will automatically create an iOS code signing certificate and upload that to the iOS Developer Center. sigh will automatically create (and fetch) a provisioning profile for our app to be used in signing a release IPA. These three tools will reduce a majority of the manual labor that is involved in creating a release IPA.

We will need to do a little bit of additional work outside of these four fastlane tools. We will need to add the iOS platform to our Ionic app, generate a build.json for release signing, and call “ionic cordova build ios –release”.

Here are the steps that we will need implement in our Fastfile in order to build an IPA:

  • produce
    • Creates the app (if needed) in iOS Dev Center
    • Can also create the app in iTunesConnect
  • cert
    • Creates your distribution certificate (if not already created)
    • Will fail if you have too many distribution certs
  • sigh
    • Creates or fetches the App Store provisioning profile using a distribution cert
    • Will probably fail if you don’t have any of the distribution certs installed on your computer
  • rm -r platforms/ios
    • Reset anything we have done to our build
  • “ionic cordova platform add ios”
    • Runs this command in the “sh” action to add the iOS platform (if not already added)
  • build.json
    • Sets our development team and provisioning profile for Ionic/Cordova to properly set our release app
  • “ionic cordova build ios –release”
    • Runs this command in the “sh” action
    • Builds release IPA

fastlane/.env

fastlane/Fastfile

Running “fastlane ios build”

Build Android APK

Here are the steps that we will need to implement in our Fastfile in order to build an APK:

  • Use “android_keystore” plugin
    • Uses keytool to generate a new keystore
    • Generate a release-signing.properties file based off of keystore
  • Add .android_signing directory to .gitignore
    • We do not want to commit our keystore and credentials to our repository
  • rm -r platforms/android
    • Reset anything we have done to our build
  • “ionic cordova platform add android”
    • Runs this command in the “sh” action to add the Android platform (if not already added)
  • Copy .android_signing contents into platforms/android
    • Ionic will automatically sign the APK if the keystore and release-signing.properties files are in platforms/android
  • ionic cordova build android –release
    • Build an unsigned and signed version of the APK
    • APKs will be in platforms/android/build/outputs/apk

Running “fastlane add_plugin android_keystore”

fastlane/.env

fastlane/Fastfile

Running “fastlane android build”

Final Product

fastlane/.env

fastlane/Fastfile

One Response

  1. […] Fastlane Screencast →Fastlane Screencast: Episode 1: Integrate fastlane into your Ionic Framework build process → […]

Leave a Reply

Your email address will not be published. Required fields are marked *