Setting up a GitHub action to deploy a Flutter web app to Firebase Hosting

I wanted to automatically compile and deploy a Flutter web app to Firebase Hosting as I merged a PR to the main branch on GitHub. Here's how I did it.

First I went over to https://firebase.google.com/docs/hosting/github-integration. It told he I should run firebase init hosting:github. The answers I gave are standard. The most important one was this:

What script should be run before every deploy? flutter build web

% firebase init hosting:github

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/anhtuan/git/agaskin_manual

Before we get started, keep in mind:

  * You are initializing within an existing Firebase project directory


=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

i  Using project [redacted]

=== Hosting:github Setup

i  Didn't detect a .git folder. Assuming /Users/anhtuan/git/agaskin_manual is the project root.
i  Authorizing with GitHub to upload your service account to a GitHub repository's secrets store.

Visit this URL on this device to log in:
https://github.com/login/oauth/authorize?[redacted]

Waiting for authentication...

✔  Success! Logged into GitHub as atn832

? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) atn832/[redacted]

✔  Created service account github-action-[redacted] with Firebase Hosting admin permissions.
✔  Uploaded service account JSON to GitHub as secret FIREBASE_SERVICE_ACCOUNT_[redacted].
i  You can manage your secrets at https://github.com/atn832/[redacted]/settings/secrets.

? Set up the workflow to run a build script before every deploy? Yes
? What script should be run before every deploy? flutter build web

✔  Created workflow file /Users/anhtuan/git/[redacted]/.github/workflows/firebase-hosting-pull-request.yml
? Set up automatic deployment to your site's live channel when a PR is merged? Yes
? What is the name of the GitHub branch associated with your site's live channel? main

✔  Created workflow file /Users/anhtuan/git/[redacted]/.github/workflows/firebase-hosting-merge.yml

i  Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App:
https://github.com/settings/connections/applications/[redacted]
i  Action required: Push any new workflow file(s) to your repo

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

The script generates firebase.json and a .github/workflows folder with 2 scripts. One compiles the app and deploys to a temporary domain. The other deploys to the live channel, which looks like [project_name].web.app. Looks like Firebase bought the web.app domain. That's brilliant.

By the way, in the actions, I also had to manually add this line before flutter build web:

      - uses: subosito/flutter-action@v1

This is so that it installs the Flutter environment before attempting to compile.

Then I tried to create a PR, and it successfully compiled the app and deployed to a temporary domain. Once I checked that the webapp looked ok, I merged the PR, which triggered the compilation and deploy to the live domain.