Setup Ci/Cd for flutter web project

Automatic deployment for flutter web application on Netlify using github actions

image by Paul Thurroth from Thurroth.com

In the world of software development today the role of Continous integration and deployment (CI/CD) cannot be over emphasized. Building Automatic deployment pipelines helps reduce time which would have been spent in doing the same process manually. Additionally, automatic deployment eliminate any human error that may arise during manual deployment.

This Article focuses only on the Flutter web application and sets up automatic deployment on Netlify using github actions. This article assumes you already have a flutter web application built and ready for deployment. Without further ado, let’s get started with the project.

Step 1: Push to Github

To use github actions for automatic deployment, you would have to host your application on github. It could be in a private or public repository it doesn’t matter.

Step 2: Publish App to netlify

To make use of automatic deployment on netlify, you must have an existing application on netlify, this means we would have to manually setup the project first before attaching it to a CI/CD pipeline. So, head on to netlify.com and create an account.

Setup your project manually using the steps below

Process 1: Build your flutter web application by running flutter build web in the terminal.

Process 2: Head on to netlify and on the team overview tab, click on the Add new Site button and in the drop down, select Deploy manually.

add a new site

Process 3: On the next page drag and drop the web folder which is located in the build folder.

Note: This is not the web folder in the root directory.

This sets up your flutter project live on netlify 💃.

Step3: Setup Secret keys

To acess netlify from actions, you would need to setup secret keys for your application.

The secret keys required are: Netlify Authentication token, and Sited Id.

To get your netlify authentication token, follow the steps below:

process 1: Click on the user profile icon and select User settings in the drop down

select user settings

process 2: On the Personal access tokens section, click on the New access token button.

select new access token

process 3: Give a name to your personal access token.

naming access token

process 4: Copy your access token and save it in a safe place. You would be needing this token later.

save new token

Now Get the site Id by following the processes below:

process 1: On the team page click on the site tab and select your newly created site. Click on the site settings

select site settings

process 2: under Site Information copy the Site Id and save this in a safe place for later use.

Add both Site Id and Netlify Token to your github repository secrets using the process below:

process 1: In the repository for this web project click on the Settings tab. In the side bar on the settings page you would see a security section. Click on the Secrets and select Actions in the drop down.

Action secrets

process 2: Create a new secret by selecting the New repository secret button.

create new repository secret

process 3: Create secrets for site id and Netlify token

name: NETLIFY_AUTH_TOKEN

secret: your_netlify_authentication_token

name: NETLIFY_SITE_ID

secret: your_site_id

use the names given above as the name for the secrets and then paste the token and site Id you got for the token and id fields respectively.

Setp 4: Setup Build Pipeline

This step is made up of may processes which I would explain as best as I can.

Process 1: In your root directory create a folder called .github and in the folder create another folder called workflows in the workflows folder, create the main.yml file.

Process 2: In the main.yml file write the code to create the name of current action using:

name: "build pipeline for web release"

add a trigger for this action using:

on: 
  push:
    branches:
    - main

the code above sets the action to be triggered on push to the main branch.

Process 3: The next thing to do is to set the job. This jobs are tasks performed by the actions

jobs:
  build:
    runs-on: ubuntu-latest

this script above sets the operating system for the github action to be ubuntu

Process 4: Add steps for the github actions. The steps required for every react application is as follows:

• Setup github actions
• Setup java environment
• Setup flutter on the latest stable version
• Run flutter pub get
• Build a flutter web project

- uses: actions/checkout@v2
- uses: actions/setup-java@v1
      with:
        java-version: '12.x'
- uses: subosito/flutter-action@v2
      with:
        channel: 'stable'
    - run: flutter pub get
    - run: flutter build web

Process 5: The next process was one that I had some issue with myself. This arises due to the fact that flutter produces single page applications (SPA) and you would need to configure netlify to accept sub pages from any request to your application.

To do this, create an a file in the root directory named netlify.toml . and paste the code below:

single page application setup

now, go back to the main.yml file, add a step to copy this file to the build folder

- name: Copy build settings to build folder
      run: cp netlify.toml build/web/

This file is created outside the build folder so it could be commited to github and so it would not be deleted when flutter builds web applications

Process 6: These next steps allow you to deploy your application build to netlify

- name: Deploy production to Netlify
      uses: South-Paw/action-netlify-deploy@v1.2.0
      with:
        github-token: ${{ secrets.GITHUB_TOKEN }}
        netlify-auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
        netlify-site-id: ${{ secrets.NETLIFY_SITE_ID }}
        build-dir: './build/web'
        comment-on-commit: true

from the step above there are some tokens that would be necessary to build your application and these tokens are:

• Github secrets secrets.GITHUB_TOKEN
• Netlify user authorization token secrets.NETLIFY_AUTH_TOKEN
• Netlify site id secrets.NETLIFY_SITE_ID

The complete workflow file is shown below

Step 5: Complete Pipeline

Commit and push your changes to github. If you are on the main branch, the pipeline would automatically kick off.

With this pipeline, whenever you make a change to your site and push to github, it automatically builds the application and deploys the completed build on netlify

Congratulations!!! your CI/CD pipeline is setup