Build and Deploy Flutter Application using CI/CD Azure Pipelines DevOps

Automated CI flow to build and publish your flutter application

Introduction

Flutter is an open-source framework that allowed us to build multi-platform applications with only a single codebase needed. To develop with Flutter, you will use a programming language called Dart. The language was created by Google in October 2011, but it has improved a lot over these past years.

Meanwhile, Azure Pipelines is a cloud service that you can use to automatically build and test your code project and make it available to other users. It works with just about any language or project type. Azure Pipelines combines continuous integration (CI) and continuous delivery (CD) to test and build your code and ship it to any target constantly and consistently. Today we gonna use Azure Pipelines to help us achieve full automated deployment flow for our Flutter applications. So without further ado let’s dive into the tutorial

Prerequisites

Our target in this tutorial is to build and deploy your flutter application in your local server. For starter, you will need :

1. Azure DevOps account
2. Repositories that contain your Flutter apps
3. Linux Server (Nginx configured)

Configure Deployment Group

Before we start to build our Azure Pipeline, we must let our account know where the targeted machine for deployment is. A deployment group is a logical set of deployment target machines that have agents installed on each one. To let our account know where to target, we simply installed an agent on our machine and it will be recognized by the deployment group

First, log in to your DevOps account and open the deployment group menu on Organization Name -> Project Name -> Pipeline -> Deployment Group

Click on the + New button to create a new Deployment Group

Creating a deployment group only needs a name for it and some brief description (optional). After you create your deployment group, it will show you a script like below

Copy those scripts and run them on your Linux server. After you got a result like the example below, you can set up a tag to make it easier to mark off this server. Follow the instruction that the script makes to you.

When it’s all done, you can check for the machine that is already being registered on your deployment group. Now the pre-step for making the Azure pipeline is done, let's go to the next step on “Building CI Pipeline”

Building CI Pipeline

To build a CI pipeline for Flutter, you will need to install the extension below

Flutter — Visual Studio Marketplace

You can check this to learn how to install the extension for your Azure DevOps organization

How to Install extensions on Azure DevOps

First, Access the Pipeline menu from the sidebar and then click New Pipeline

Use the classic editor to configure the pipeline

Select the source of the project with Azure Repos Git, then configure to a project branch that you want to deploy

Configure your pipeline with an empty job option, then you will get an empty Azure Pipeline for you to configure.

Add Task to your pipeline by clicking the + button on the right side of your job name, for flutter building you will need 2 tasks, flutter install and flutter build.

For the install task, you have to make sure that Release Url Mode on this task is set to auto, the channel for downloading flutter SDK is using stable and the version is set to be the latest.

Then for the building task, you can choose what target platform you want to build your app for. In this tutorial, I will choose to build and deploy this app as a website so I will choose Web as a build platform option.

Now your CI pipeline is ready to build your flutter app. The next step for us is to copy our build to the artifact stagging directory and then publish it with the publish artifact task.

After that press for Save & Queue button and wait for the first time running the result of this CI pipeline.

Building a CD pipeline

Now after we configure a CI pipeline, we are ready to build a deployment pipeline for our project

First find a Releases menu on Organization Name -> Project Name -> Pipeline -> Releases, pick + new button and choose for new release pipeline.

Choose an empty job to get an empty deploy pipeline.

Give a proper name for your CD pipeline and then click the add artifact option.

Select the CI pipeline that you made before for this artifact and then click the thunder button on the upper right. Enabled Continuous deployment trigger on it.

Go to Stage 1 to configure your deployment task, first remove the unused agent job in this pipeline, after that replace it with the deployment group job by clicking the button on the right side.

After that set the deployment group that you make earlier as the deployment target for this job.

Add Command Line Script task to run cmd command and then write command below

sudo cp -r _$(Build.DefinitionName) /var/www/html

After that you can save your pipeline and congrats, your Azure pipeline has been set up and ready to launch.

Set Up Nginx

The last step you must do to test your website is to set up your Nginx config. You can follow the guide from this article How To Host Flutter Web In Linux Using Nginx.

Conclusion

from today's tutorial, we learn how to build an automated pipeline for deploying your application to your local server. Hope this tutorial can help for someone that start to learn about CI/CD or want to try automated deployment for flutter. Thanks for your attention.