Flutter: Setting up CI/CD using codemagic made easy

Automating build and deployment process has been a thing for a while as it creates ease of development, efficient and quicker way of shipping product, continuous delivery of code into production and maintaining features.

In the world of mobile app development, continuous integration and continuous delivery (CI/CD) have become essential practices for streamlining the software development process. CI/CD enables developers to automate the building, testing, and deployment of their applications, saving time and effort.

Some of these continuous delivery and deployment tools seem a bit too complicated as some processes require almost two or three platforms integrated together in order to have an efficient system. Also, writing multiple .yaml files could be tedious for developers who just want to enjoy the ease of delivering products without worrying about the complexity of maintaining these deployment configurations.

With its all in one system for both Continuous Integration and Delivery, as well as an editor for custom configurations, Codemagic has simplified the process of creating an efficient continuous delivery workflow.

In this article, we’ll explore the step-by-step guidelines on how to setup Codemagic for flutter applications for automated deployment to app stores (Google Play And App Store Connect).

Step 1: Sign Up and Connect your Repository

• Visit the Codemagic website (codemagic.io) and sign up for a new account.

• Once you’re logged in, click on the “Add New App” button and select your version control system (e.g., GitHub, GitLab, Bitbucket).

• Connect your repository to Codemagic by following the prompts and granting the necessary permissions. Do not forget to select Flutter as your project type.

Step 2: Configure Build Settings

• After connecting your repository, Codemagic will detect your Flutter project automatically. If not, you can manually specify the location of your project’s source code.
• Select the branch you want Codemagic to monitor for changes and trigger build.

• Choose the platform(s) you want to build your app for (Android, iOS, or both).

Yo! That’s our first successful build.

Step 3: Setup your build workflow

CodeMagic workflows are key features of the platform. They allow developers to automate the building, testing, and deployment processes for their mobile apps. Workflows in CodeMagic are defined in a YAML file called codemagic.yaml or with the CodeMagic Workflow Editor.

Workflows consist of a series of steps that define the tasks to be performed. Each step represents a specific action such as building the app, running tests, or deploying the app to a distribution platform. CodeMagic provides a wide range of predefined steps on the Workflow Editor that can be used, and custom steps can also be created if needed.

You can see those steps on the Codemagic workflow editor so lets take them gradually.

• Triggering Workflows (Build Triggers): Workflows can be triggered by various events such as pushing code to a specific branch in a version control system (e.g., Git), creating a pull request, or manually triggering a build.

• Environment Setup (Environment Variables): Workflow allows you to specify the required environment variables, including credentials and configuration settings. These are secured, stored and can be accessed during the build process. This allows for secured integration with external services, such as third-party APIs or deployment platforms.

• Dependency Caching: Dependency caching is a mechanism that allows developers to store and reuse dependencies across builds. CodeMagic leverages dependency caching by storing the downloaded dependencies on its build servers. When a new build is triggered, CodeMagic checks if the dependencies have already been cached. If they are available in the cache, CodeMagic retrieves them instead of re-downloading them. This significantly speeds up the build process since the dependencies are readily available locally. You can add them but for this demo, i’m not.

• Tests and code analysis: CodeMagic offers test and static analysis features to help ensure the quality and reliability of your mobile app during the development process. You have access to add your app test and dart code analysis.

• Build and Release type: Codemagic provides you option to set your preferred build tool from your SDK version and channel choice. It also gives you access to set your release type either release or debug and your build flavors.

Step 4: Configure Code Signing and Distribution

• If you want to distribute your app to app stores or testers, integrate CodeMagic with platforms like Google Play Store or Apple App Store. Configure the necessary publishing settings and credentials. If your app requires code signing for distribution, set up code signing certificates and provisioning profiles for iOS and signing keys for Android. CodeMagic offers both automatic and manual code signing options, depending on your requirements. Configure code signing settings accordingly.

Android Code Signing:

For code signing, enable the checkbox and upload your key.properties file.
Note: Check your Android root folder from project directory if you have generated it or check out flutter doc on how to generate the file.

Now, we need to connect google play with codemagic to enable automatic distribution to the store for either publish or internal test.

Click on the Google Play step and enable Google Play publishing, check the boxes accordingly noting your track type and distribution choices.

Credentials (.json): To generate this file, login to your google play console using an owner enabled account and follow this guide.

iOS code signing:

On iOS code signing, select automatic as we have manual also but we have automatic code signing for this setup.
Now, select Teams on the left navigation bar. Click Integrations and select Developer Portal. To get your App store details as show on the dialog, go to this guide. Also login AppStore Connect as an owner.

We have now connected Codemagic to Appstore connect.
Now go back to your build setup workflow, Select the generated API key, select AppStore as your Provisioning profile type, select your app Bundle Identifier too and Save.

Select the next step App Store Connect, enable App Store Connect Publishing and select your API key. Check necessary boxes based on your distribution build needs and save.

Step 5: Customize Notifications and Integrations

Codemagic allows you to integrate with third-party services for enhanced functionality. For example, you can integrate with crash reporting tools like Firebase Crashlytics or send notifications to Slack or email.

Customize the notification settings according to your preferences, so you and your team stay updated on build and test results.

Save and Trigger your First Build

• Review all the settings and configurations you’ve defined.
• Click on the “Save and Build” button to trigger your first build on Codemagic.
• Monitor the build progress, and once completed, check the build logs and artifacts to ensure everything is working as expected.

Automatic Code Versioning (Bonus Step):

While Codemagic doesn’t provide an out-of-the-box automatic build versioning feature, you can achieve automatic build versioning by incorporating certain steps in your build pipeline.

This guide from Codemagic will help you achieve that.

This script gets your current build number and increases it.

--build-number=$(($PROJECT_BUILD_NUMBER + 1))

--build-name=1.0.$PROJECT_BUILD_NUMBER --build-number=$PROJECT_BUILD_NUMBER

If your build fails, go back and check if you implemented everything correctly. Enjoy!!