Build and Host Flutter Web to GitHub Pages and use of secret keys 🔑 (Part-1)

Let’s see how we can automate using GitHub Actions workflow to build and host Flutter Web to GitHub Pages

Ahoy!👋 Another day another blog, and today it is on how to host Flutter web to GitHub pages and also handle when you have a secret key 🔑 for an ENV or for your APIs.

Understanding GitHub Actions and Workflow

Creating a Workflow File ✏️

The first thing you have to do is create a .yml or .yaml file, which is a configuration file that GitHub Action can understand.

You must store workflow files in the .github/workflows/ directory in your repository. You can name the file whatever you want, for this tutorial I have named it build.yaml.

Writing the code inside the build.yaml file

on

To automatically trigger a workflow, use on to define which events can cause the workflow to run. For a list of available events, see "Events that trigger workflows."

The push event has a branches filter that causes your workflow to run only when a push to a branch that matches the branches filter occurs, instead of when any push occurs.

on:
  push:
    branches: [ master ]

jobs

A workflow run is made up of one or more jobs, which runs in parallel by default. To run jobs sequentially, you can define dependencies on other jobs using the jobs.<job_id>.needs keyword.

Each job runs in a runner environment specified by runs-on. You can run unlimited jobs as long as you are within the workflow usage limits.

ubuntu-latest the label currently uses the Ubuntu 22.04 runner image.

jobs:
  build:
    runs-on: ubuntu-latest

steps

A job contains a sequence of tasks called steps. You can have a granular step that runs only one command or a multi-line with a sequence of tasks packed together.

steps:
  - uses: actions/checkout@v3
  - uses: subosito/flutter-action@v2
    with:
      channel: 'stable'
  - uses: erickzanardo/flutter-gh-pages@v7
    with:
      basehref: /flutter-github-page/

Let’s go through a series of steps in order to meet our requirements.

1. We have to checkout the repo first for that we use actions/checkout@v3 .
2. We have to set up the Flutter environment for the GitHub Actions and for that we will be using subosito/flutter-action@v2 . In this step using with: and channel: you can specify which channel of flutter (master/main/beta/stable) you want it to build on.
3. To automate the build and deploy of your Flutter web app on GitHub gh pages we will be using erickzanardo/flutter-gh-pages@v7 . We also have to remember to add the base reference so that the published URLs comply with GitHub’s slug scheme i.e. same as your repo name which is done via basehref:. This replaces the <base href="$FLUTTER_BASE_HREF"> tag inside the web/index.html file to the repository name allowing GitHub to resolve all the links correctly.

❗ Once you push the file and workflow starts running you might get an error like remote: Permission to srinivasa-dev/flutter-github-page.git denied to github-actions[bot].

You must allow the GitHub Actions to Read and Write to your Repo. To do that you have to navigate to the repo settings tab > Actions > General and scroll all the way to the bottom to the Workflow permissions and choose Read and write permissions. Refer to the screenshot below 👇

Enabling GitHub Pages 📃

In case you aren’t familiar with the benefits of GitHub, it allows you to host simple web pages through its Pages feature. In theory, they should be lightweight landing pages for your projects hosted through your repository, hosted from a gh-pages branch, which is where your static site generator (like Hugo or Jekyll) would publish all the rendered content.

You can enable it from your repo settings tab and configure it as shown in the image below.

gh-pages branch will appear once you push the code to repo with the workflow file and run it.

Once everything is set up and pushed you should now start seeing the GitHub Actions workflow doing its job under the Repo Actions Tab.

And there we go this is how you can setup the GitHub Actions Workflow for your Flutter Web

Now let’s see how we can add Secret Keys to your GitHub Actions Workflow and pass it on to your Flutter project. (Part-2)

Build and Host Flutter Web to GitHub Pages and use of secret keys 🔑 (Part-2)

The complete Source code is Available here 👇

GitHub - srinivasa-dev/flutter-github-page: An example project to Build and Host Flutter Web on to…

Also, check out how you can add Quick Actions for Flutter Android

Quick Action for Android in Flutter