Deploying Flutter Web with GitHub Actions

I'm using Firebase Hosting for my Flutter project.
Even though it's a prototype, building locally and deploying manually was getting tedious.

This blog also deploys via GitHub Actions every time I git push after finishing a post.
So I decided to deploy the Flutter web app with GitHub Actions too.

I thought it would be tricky, but once I actually tried it, it wasn't hard at all.
First, there are two things you need to set up:

• Install Firebase
• Install FlutterFire

First, follow the instructions at Flutter web integration to enable Firebase Hosting in your Flutter project.
For me, instead of the setup described in the Initialize an existing project section, I configured firebase.json like this:

 "hosting": {
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "asia-east1"
    },
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }

Then when you run firebase init hosting:github, two files will be created in .github/workflows.
I decided to set up the deployment configuration in the firebase-hosting-merge.yml file.

Since I have secret keys in use, follow the instructions at Using secrets in GitHub Actions to add your secret keys. I had several keys to add.
I also added the firebase_options.dart file contents as a secret. I wanted to generate this during the action, but that would require installing Firebase and FlutterFire too, so I took the simple approach of adding it as a secret.

Now let's look at the yml file for the action, which is the core of this post.

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Set up Flutter
        uses: subosito/flutter-action@v2
        with:
          channel: stable
          flutter-version-file: pubspec.yaml
      - name: Decode firebase_option
        run: echo "$firebase_options_dart" > lib/firebase_options.dart
        env:
          firebase_options_dart: ${{secrets.YOUR_FILE_SECRET_KEY}}
      - name: Install dependencies
        run: dart pub get
      - name: Build runner
        run: dart run build_runner build --delete-conflicting-outputs
      - name: Build for the web
        run: flutter build web --wasm
      - name: Deploy to Firebase
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.FIREBASE_AUTO_ADDED_SECRET }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_AUTO_ADDED_SECRET }}'
          projectId: your-firebase-project-id
          channelId: live

The Deploy to Firebase section in the file will already be added automatically if you ran the firebase init hosting:github command, so you don't need to modify it separately.

Before the build stage, the following files need to exist:
ex) firebase_options.dart, *.freezed.dart, *.g.dart
That's why I created the files with the Decode firebase_option and Build runner steps.

Here's what this file does overall:

1. Install Flutter in the deployment environment
2. Create firebase_options.dart
3. Install dependencies
4. Run the code generator
5. Build for web
6. Deploy to Firebase

With this setup, it takes about 5 minutes but you can deploy Flutter to the web.
For safety, I recommend also adding 2FA!

I removed the caching section from the flutter action above, but feel free to apply it if you need it!
I used flutter-version-file because I pinned my version, so I set it this way.
If your setup is different from mine, you'll need to change this part.

Presents are made for the pleasure of who gives them, not the merits of who receives them.

— Carlos Ruiz Zafon