Automating Flutter Web Deployments to Netlify Using GitHub Actions

A step-by-step guide on how to deploy Flutter to Netlify using GitHub Actions

Photo by Frank McKenna on Unsplash

Lately, there has been a lot of fuss over Flutter. Some people call it the future, while some say it’s overrated. But I think it’s a good framework to learn nonetheless. The sheer amount of things that can be done with Flutter is unbelievable, including Android, iOS, desktop, and web programming.

Here in this tutorial, I’m going to share how to implement your Flutter web deployments using GitHub Actions. Also, we’re going to use Netlify. Why Netlify? Because, honestly, Netlify is very easy to use. Now, without further ado, let’s get to it.

Creating Your Netlify Site

This section will discuss how you can create an empty Netlify site using the Netlify CLI. We’ll be using npm to install it for us. In my case, I use Ubuntu 18.04 as the host OS for the npm installation.

1. Install the Netlify CLI

To install the Netlify CLI, you just need to run:

npm install netlify-cli -g

After the installation is complete, check if it’s installed correctly by running this command:

netlify

2. Log in to Netlify from the CLI

Before you can start using the CLI, Netlify needs you to authenticate yourself.

netlify login

Then a browser window will open:

Authorize CLI. Image from the Netlify docs.

3. Creating a blank site

After finishing your login, create a blank site using this command:

netlify sites:create --name <site name>

4. Retrieving your Site ID and personal access token

To run continuous development remotely, you need both your site ID and your personal access token to help you.

Retrieve the site ID in the site settings. Image by the author.

Retrieve your site ID by:

1. Going into the site settings.
2. Copy the API ID value.

The next step would be to retrieve the personal access token.

Go to the user settings. Image by the author.

Go to the user settings.

Get a new access token. Image by the author.

To get an access token, you have to make a new one:

1. Go to the Applications tab.
2. Click “New access token.”

Copy and save the access token shown on the next screen, and save it because you’ll need it later.

Set Repository Secrets

After we’ve retrieved the access tokens and site ID, we’ll save them inside the repository secret.

Note: Why do we need to use repository secrets? To prevent sensitive IDs or tokens from being pushed to the repository.

Open your repository settings. Image by the author.

To create a secret:

1. Go to the repository settings.
2. Click Secrets on the left-side tab.
3. Click “New repository secret.”

Create a new secret. Image by the author.

On the “New secret” page input the secret name and value. When finished, click the “Add secret” button.

In its entirety, we’ve added about three secrets: the GitHub personal access token, the Netlify personal access token, and the Netlify site ID.

Retrieving the GitHub Access Token

Because we’re going to automate deployments using GitHub Actions, a personal access token would be required. You’d need to open your GitHub Developer Settings here.

GitHub developer settings. Image by the author.

After opening your developer settings page:

1. Open the personal access tokens page.
2. Generate a new token for GitHub Actions.

Generating a new personal access token. Image by the author.

The next steps would be:

1. Input a name for your token.
2. Check the workflow to give access to GitHub Actions.
3. Scroll to the bottom of the page.
4. Click the “Generate token” button.

Token successfully generated. Image by the author.

Copy the access token and save it somewhere because it’ll be used later on.

Creating the CI/CD Workflow

CI/CD using GitHub Actions is fairly simple. It requires us to make a YAML file. This YAML file is called a workflow in GitHub Actions because it defines the steps needed to form a CI/CD.

GitHub Actions workflow that triggers on push/pull request to the master branch.

To start our workflow, we must enable builds to start after push/pull requests to the master branch, assuming all deployments would be from the master.

Workflow to build Flutter web projects

For the Flutter building process, I used an action made by subosito. You can check the Flutter Actions detail here. For Flutter web, we first have to initialize the configurations to enable web builds. Thus, we ran:

flutter config --enable-web

Then if you want to add tests to the workflow, you can by adding the command:

flutter test

Finally, build the app using:

flutter build web

The results of the build will be in the build/web folder.

Workflow to push Flutter web builds to Netlify

After a successful build, deploy the files to Netlify manually. Here’s a snippet I used by nwtgck. I changed a few variables to be able to publish Flutter apps, but you can check Netlify Actions here.

In this last workflow, you’ll access the secrets we previously stored on our repository settings. The entire workflow can be copied from this gist below:

Entire gist for Flutter web workflow

Your CI/CD workflow should be finished. Save the workflow inside .github/workflows, and try running it yourself! You can check the dummy site I deployed here.

Summary

We’ve successfully created a CI/CD pipeline for Flutter web using Github Actions. To summarize our steps:

1. Create a blank Netlify site.
2. Retrieve the personal access token from Netlify and the site ID.
3. Retrieve the personal access token from GitHub.
4. Set the secrets inside the repository settings.
5. Create a GitHub Action YAML file inside .github/workflows.

Voila! We’ve finished our tutorial. Now you have an open playbook to deploy your future Flutter web apps using GitHub Actions.