Flutter CI / CD
There is a lot of thought process and engineering practice behind the deployment strategy and the whole DevOps process (Automation, Monitoring). We won't go into those details, but we will start with something simple. Automated Pipeline for deployments. Before going in we have to see the basics of Continuous Integration & Continuous Deployment.
What exactly is CI/CD, anyway?
CI/CD stands for Continuous Integration and Continuous Delivery (or Continuous Deployment), it is about how an Integrated code on a shared repository is used to release software to production multiple times a day with the help of automation.
CI CD is a philosophy, a way of doing things, that makes your life easier. It stands for Continuous Integration and depending on whether you give it permission to Deploy your app automatically, the CD could stand for “Continuous Delivery” or “Continuous Deployment”.
CI CD solutions allow you to catch problems faster, while they’re still relatively easy to fix. It runs your tests and analysis in the background, where you don’t have to think about them. Sticking to the principles inherent to every CI CD Solution will help keep your repository up to date.
In general, actually using mobile CI CD day in and day out comes down to consistently doing a few simple things:
Commit, push and merge small chunks of code often.
Include tests in your app so the CI machine will run them for you.
Don’t ignore your emails (or Slack). Email or Slack is how the CI machine contacts you to tell you something went wrong.
If you’re not allowing the pipeline to deploy automatically, then after a successful build you would send the finished files (called artifacts) to wherever you need them. If you’re using Continuous Delivery, sending it to managers, testers, stakeholders or the app stores is taken care of for you.
When the process is complete, and whether it passed or failed.
There are two parts to all this, Continuous Integration and Continuous Delivery/Deployment.
Flutter Continuous Integration and Workflows
Continuous Integration is an automated way of building every time you push code to your repository and CI has put a lot of thought and effort into making our Flutter Continuous Integration as easy as possible. CI CD solutions are ideally enhanced with workflows. Workflows allow you to add or remove automated steps that happen before or after your build, so you can automate things like:
Automatically running tests from Flutter’s test folder.
Signing an Android APK with a keystore.
Installing iOS Certificates and Provisioning Profiles.
Creating an Android Dependency Report.
Continuous Delivery/Deployment for Mobile Apps
Continuous Delivery is the automated “delivery” of the application with environment deployment (e.g. a development or production variant), code signing, versioning and sharing the successfully built releases with the related users (e.g. testers). But what does “delivery” in continuous delivery mean?
For mobile apps, where binary files are the only means of deploying apps, the concept of “delivery” is especially relevant.
It means that the Continuous Integration machine “delivered” all of the “artifacts” you’ll need in order to “deploy“ your app to the next step. So, what’s the next step?
In Continuous Delivery you do the deploying, in Continuous Deployment deploying is just the last step in the workflow. You can even have the finished binary uploaded to the app stores, automatically keeping your app updated.
But what if I don’t want to send it to the app stores yet?
That’s fine, you can make different workflows for each branch. All you do then is make sure you don’t merge and push to the branch that goes to the app stores until you’re ready.
CI/CD Options
Several continuous integrations (CI) and continuous delivery (CD) options are available to help automate your application's delivery.
All-in-one options with built-in Flutter functionality
Codemagic
At the Flutter Live 2018 conference in London, Nevercode partnered with Google and launched a dedicated CI/CD solution for Flutter apps – a solution called Codemagic. With Codemagic, you can have your Flutter apps tested and released with zero configuration and no pain.
If you want to have more control over the scripts, Codemagic allows developers to run custom scripts and create custom workflows for their apps. Developing high-quality apps fast just got even better!
Requirements
You need a few things to set up your Flutter app on Codemagic.
Obviously, your Flutter app with some tests.
The Flutter app should be hosted on GitHub, GitLab or Bitbucket.
Optional code signing details, like certificates and provisioning profiles, if you want to publish to App Store or Play Store
Optional Slack workspace for sending build reports and artifacts.
Now, we are ready to add CI/CD to our Flutter app. However, this write-up will not cover code signing and publishing.
Getting started
Before starting setup add your Flutter project to a code hosting platform (like GitHub, Bitbucket or GitLab) using a version control system. To start building your apps using Codemagic CI/CD, first you have to sign up using a GitHub, Bitbucket or GitLab account, or via email.
How to set up Code Magic for Flutter Application?
Now that you know what Code Magic is, let’s dive into the process of automating our workflow:
There are two options to setup Codemagic in our flutter app
Using Workflow Editor
Using YAML Configuration, codemagic.yaml
Using Workflow Editor
Signup to Code Magic. I prefer signing up using GitHub, as both code magic and GitHub are later going to connect ultimately.
Create your application on Code Magic click over add application button. Enter all the required details accordingly.
Connect your code magic application with the git repository of your flutter application. If you own that repository, Click on Github, Bitbucket, or Gitlab accordingly.
If you’re not an owner, but a collaborator to that repository or it's a public repository then you have to click the “Other” option to clone the repository through the URL.
If it's a private repository, you will then be asked to prove your access to the repository. Once done successfully, you should see a workflow editor like this:
This is what we call a Workflow editor, especially designed and developed for Flutter Applications.
4. We have Build platforms, in which you can decide to build platforms for your applications. I would like to build for both android and ios, so I checked both of them.If you just want to run the test and not build anything, then you can check “Run Tests only”.
5. Next comes, Build Triggers. You can decide when code magic builds your application, you can automate it by adding push triggers to the repository. In this case, whenever there is a new push to the main or master branch, code magic will start building your application or maybe when pull requests are updated or merged. All up to you!
7. You can enable static code analysis, and integration and unit tests (flutter test) by following the required steps
8. Then we have our main building section, you can specify which android build you need, APK or App bundle and write any additional arguments you may have like no sound null safety, etc.
9. If you would also like an IPA then you need to attach a key from your apple developer account to code magic. Let me show you how to do it
Login to app store connect.
Go to Users & Access > Keys
Create a new key by clicking on the + icon.
Type any name for your new key, and give it access permissions of App Manager.
Download the API key (.p8 file), you can only download it once.
That’s, now you have the Key ID and the Issuer ID, copy both of them to your code magic account. (User settings > Apple Developer Portal Keys > Add key)
Once added the key successfully, go back to your app, and in the iOS code signing section, select your key and your app store application.
10. That’s it, you will now get both android and ios versions of your application each time there is an update to the repository. (You don’t even need a MacBook to do all the XCode stuff). You can do other extra steps if you want to configure the deployment to Firebase, Apple, or Google Play Store accordingly.
Setup completed, that’s all you needed to do. Codemagic remembers your configuration for the next time. Go ahead and make your first ever build.
11. Take an extra step by integrating Slack and Email to receive build notifications.
Good luck exploring Code Magic, code more and worry less. If you learned something from this article, don’t forget to give it a thumbs up!
2. Using YAML Configuration :
You can also configure your Flutter workflow using the codemagic.yaml file. To use YAML, click on Switch to YAML configuration.
Using this file you can customize the workflow pipelines used while building the app on Codemagic. You can just keep this file in your project repository and it will get detected automatically.
How to get the YAML file?
Switch to yaml configuration on Codemagic dashboard
A dialog box will appear for updating your settings, and whether you want to export the current configuration as codemagic.yaml. Click Save changes.
After saving changes you receive your codemagic.yaml file with exported current configuration we did in the last steps.and you just locate this file in our flutter project root.
Understanding the YAML file
Now let’s take a look at what's inside the codemagic.yaml file.
First of all, if you collapse all the inner sections of the code in your code editor, you will see that the main heading is the workflows which contains all the workflows present in the project (defined in the Codemagic UI).
There are three workflows:
Default Workflow
Android Workflow
iOS Workflow
If you want to know how to create multiple workflows, take a look at this article here.
Now, if you expand the default-workflow, you will see that it contains five sub-headings:
name: Name of the workflow defined in the Codemagic UI
environment: It contains all the environment variables and the Flutter channel.
scripts: It contains the whole pipeline configuration for this workflow.
publishing: This contains a description for where the app would be published after building.
artifacts: This contains the location of output files created after building.
If you look into the environment section, you will see that it contains two environment variables:
IOS_FIREBASE_PLIST: This contains the encrypted version of the iOS configuration file for Firebase, GoogleService-Info.plist.
ANDROID_FIREBASE_JSON: This contains the encrypted version of the Android configuration file for Firebase, google-services.json.
The environment tab also contains the Flutter channel that you want to use while building the app, here it is set to a stable branch.
The script contains certain commands for the following:
Generating the debug key for Android
Get Flutter packages
Run Flutter tests
Pre-build script
Build debug apk of the app
The publishing section contains information to specify where the app should be published after building.
Here, only email is used for publishing. You can add other publishing methods that Codemagic supports, like Slack, Google Play Store, App Store Connect.
The artifacts section contains all the output files that will be created after the build process.
How to use the YAML file?
I will show you how to use codemagic.yaml from Codemagic Web UI during the build.
First of all, you have to place the codemagic.yaml file in the root directory of the project.
Then, commit the file to git and push it.
Now, go to the Settings of the project from Codemagic UI.
Click on Start new build from Codemagic Build section
Then click on Select workflow from codemagic.yaml.
So, now you can select the workflow that you want to use for the build.
Click on Start new build to start the building process.
Important :
Environment variables
You can store your credentials, API keys or any kind of secret file on Codemagic by specifying them in the Environment variables section. Before storing the sensitive keys/files, make sure that you encrypt them by going to the Encrypt environment variables option under the Configuration as code section. learn more about them here.
Custom scripts
You can define custom scripts by clicking on any of the “+” buttons located before the various sections of the Flutter workflow editor. The custom scripts can be defined in post-clone, pre-test, post-test, pre-build, post-build, pre-publish and post-publish phases.
You can define custom scripts in any language. (The language can be specified with a shebang line.) For example, if you are using Firebase in your project, you need to decrypt the secret Firebase files before building the app. You can define the following in the pre-build script:
Comments
Post a Comment