Setup Ci/Cd for flutter web project
Automatic deployment for flutter web application on Netlify using github actions
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
.
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
process 2: On the Personal access tokens
section, click on the New access token
button.
process 3: Give a name to your personal access token.
process 4: Copy your access token and save it in a safe place. You would be needing this token later.
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
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.
process 2: Create a new secret by selecting the New repository secret
button.
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:
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