How to Set up CI/CD Pipelines for Flutter in Bitrise
by Alvin Fong, Engineering Manager
On June 24, 2020, we hosted an online Flutter meetup. I delivered a talk about how to set up a Bitrise workflow for Flutter projects. Here is a how-to guide for both iOS and Android!
Part 1: Android
Let’s start with the Android side of the Flutter project. In case you don’t have a project handy, you can clone a tutorial project such as this. If the Flutter project doesn’t include an Android folder, you can use Terminal, navigate to the flutter project root, and create one:
$ flutter create .Next, let’s set up the local debug configuration. In this example we’ll be using debug.keystore to sign our local builds, and we’ll define the passwords in keystore.properties.
In build.gradle, Define your build.gradle as below:
The build.gradle file is available here.
Note how our local (debug) signing is defined using the keystore.properties file, while the release signing is defined using Bitrise environment variables.
Keystore.properties is simple to define:
storePassword=androidkeyPassword=androidkeyAlias=androiddebugkeystoreFile={path_to_project}/android/debug.keystore
As a security best-practice, these three files (keystore.properties, debug.keystore, and release.keystore) should be added to your .gitIgnore file, and never be checked into version control.
So, let’s add the app to Bitrise. Head to the Bitrise dashboard and add an app using the Web UI:
Follow the wizard’s instructions to setup your Bitrise app and connect your code repository. Webhooks can be done automatically if you’re both the source repository admin and Bitrise admin.
If you choose to enable tests now, the wizard will ask you about iOS signing details. If you don’t have iOS signing ready, you can choose to not run tests — it is easy to add them in.
Bitrise will automatically start an initial build. For small apps, It takes about two minutes to run this initial build. Head to the Workflow Section:
This workflow guides Bitrise in starting up a build machine, cloning your source repo, installs Flutter, Performs static code analysis — no code build is done at this point.
If you had chosen not to run tests during Bitrise setup, you can add the “Flutter Test” step to the workflow below “Flutter Analyze”.
Add the “Flutter Build” step after “Flutter Test” and save the workflow. Now the workflow can create the APK file. Before we run this new workflow, let’s upload our keystore.
Head to the Code Signing tab and upload the Android Release Keystore file:
Even though we’ve uploaded our keystore file to Bitrise, the file doesn’t automatically get loaded onto the build machine. Head back to the workflow Editor, and add a “File Downloader” step before “Flutter Build”
Download source: $BITRISEIO_ANDROID_KEYSTORE_URL
Download Destin.: $HOME/git/android/app/release.keystoreThe source is a Bitrise environment variable. The destination can be pretty much any path as long as it matches the location declared in build.gradle.
Save the workflow and re-run the workflow. For most projects, the build should take around 10 minutes.
Part 2: iOS
First, you must have Xcode installed on your computer — which means you will need to do these steps on a MacOS machine.
The major difference between the two platforms is how code signing is handled — on iOS the process is a fair bit more complicated than Android. Don’t be afraid to reach out to your local friendly iOS developer for help! They know first-hand how byzantine the process can be. iOS code signing is handled through Xcode. Generally speaking, if you can build your app to run on a device or simulator with Xcode, it will work with Bitrise. In this section I’ll describe an overview of the Xcode build process.
For iOS code signing, you will need three things:
- Apple developer account, whether enterprise or personal
- The .cer certificate file, converted to .p12 via keychain access
- The mobile provisioning file linking the certificate, app, and test devices
Open the iOS module in Xcode by right-clicking the iOS folder:
This guide will not describe the iOS code signing process, but the below state will be achieved after loading the correct certificates and provisioning profiles:
At this point, you would be able to run your code on an iOS Simulator or iPhone. Return to Bitrise’s Workflow Editor and upload the signing certificate and provisioning:
Head back to the Workflow Editor. We’ll need to add a couple of steps:
- Before Flutter build, add a step called “Certificate and profile installer”. This is analogous to our Android Keystore downloader step. This will load the iOS signing files from Bitrise onto the build machine
- Edit the “Flutter Build” step. Set Platform to “both”.
Under the “iOS Platform configs” section, remove the — no-codesign flag - We need to add a script to convert the iOS .app file to a .ipa file that can be installed on test devices. By default, “Flutter Build” will create an iOS .app file, which cannot be installed on iPhones. Insert this script between “Flutter Build” and “Deploy to Bitrise”
# Create IPA from Payload
#!/usr/bin/env bash
# fail if any commands failsset -e
# debug log
set -x# make folder, add .app then zip it and rename it to .ipa
mkdir -p Payloadmv “$BITRISE_APP_DIR_PATH” Payload
zip -r -y Payload.zip “Payload/Runner.app”
mv Payload.zip $BITRISE_DEPLOY_DIR/Runner.ipa# remove Payload folder
rm -Rf Payload
Rebuild the workflow and you’re on your way!
Have questions about setting up CI/CD Pipelines in Bitrise?? Click here to speak to one of our experts.
Alvin Fong is an Engineering Manager at TribalScale. He develops apps on Android and Flutter platforms, and is changing his mindset every day to better accommodate TDD. His current interests include learning Kotlin testing and architecture patterns.
TribalScale is a global innovation firm that helps enterprises adapt and thrive in the digital era. We transform teams and processes, build best-in-class digital products, and create disruptive startups. Learn more about us on our website. Connect with us on Twitter, LinkedIn & Facebook!
