Automate your Flutter web deploy to Firebase using Github actions

If you’re developing a Flutter web application and you want to share it with the world, Firebase Hosting provides a reliable and secure way to do so. In this tutorial, I’ll guide you through the process of deploying your Flutter web app to Firebase Hosting using Github actions step by step. By the end of this tutorial, you’ll have your Flutter web app up and running on Firebase Hosting, ready to be accessed by anyone with an internet connection. So, let’s get started!

Flutter web

If you still haven’t enabled web for your project you can do that by running the following command.

1

flutter create --platforms web .

after that you can run your web applcation using

1

flutter run -d chrome

Firebase setup

To be able to deploy your website to Firebase hosting you must have a firebase project, to create one follow the below steps:

• Go to Firebase console.
• Click on Add project.
• Enter the name of your project, then next.
• Click on Create project.
• It will take sometime, then a Countinue button will appear, click on that button.

Now as you have a Firebase project, we will need to setup our machine to use Firebase CLI. You can do that by following these steps:

• Install Firebase CLI by runing the following command.

  1	npm install -g firebase-tools

• Sign in to google using firebase login.

  1	firebase login

• Navigate to your Flutter project directory.
• Run the following command.

  1	firebase init

• Select Hosting: Configure files for Firebase Hosting from the list.
• Select Use an existing project, then select the project that we just created.
• It will ask you What do you want to use as your public directory? enter build/web.
• If it will ask you to override any file select no.

Github actions

Firebase already has one command that create a workflow for deploying a website to firebase using Github. We will use that command to setup the deploying part then, we will take care of building our flutter website ourself.

• To start run the following command.

  1	firebase init hosting:github

• Your default browser will open asking you to login to firebase, follow the steps in the browser to login.

• After you login, go back to the terminal and you will see that it’s asking you for which GitHub repository would you like to set up a GitHub workflow, enter the repository you want to setup the Github actions for in this format: github_username/repository_name.

• It will ask you if it should set up the workflow to run a build script before every deploy, enter N.

• Then, it will ask you if it should set up automatic deployment to your site’s live channel when a PR is merged, enter Y.

• Now enter the name of the branch that you want the workflow to run when you push code, usually its master or main.

• You will see that we have a new directory .github/workflows, navigate there and select firebase-hosting-merge.yml.

This workflow will run whenever you push/merge a code into the branch we selected while setuping the workflow. The content of the file will be somthing like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '$'
          firebaseServiceAccount: '$'
          channelId: live
          projectId: website-xxw23

we will update this yml file to not just deploy our website, but also to build it before deploying, after the step - uses: actions/checkout@v2 we will add the following steps:

1
2
3
4
5

      - uses: subosito/flutter-action@v2
        with:
          channel: 'stable'
      - run: flutter pub get
      - run: flutter build web

After modification, the file will look like something similar to:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: subosito/flutter-action@v2
        with:
          channel: 'stable'
      - run: flutter pub get
      - run: flutter build web
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '$'
          firebaseServiceAccount: '$'
          channelId: live
          projectId: website-xxw23

Now, we will do the same for firebase-hosting-pull-request.yml, this workflow will run whenever you create a pull request.

1
2
3
4
5
6
7
8
9
10
11
12
13

name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
  build_and_preview:
    if: '$'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '$'
          firebaseServiceAccount: '$'
          projectId: website-xxw23

We will add the same steps so the yml file will look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
  build_and_preview:
    if: '$'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: subosito/flutter-action@v2
        with:
          channel: 'stable'
      - run: flutter pub get
      - run: flutter build web
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '$'
          firebaseServiceAccount: '$'
          projectId: website-xxw23

• Now commit the code and push it to GitHub.

• If you go to your Github repository, then select Actions (Or you can go there by modifying this link https://github.com/your_username/your_repo/actions), you will see that there is a workflow runing. wait for it to end.

• Once it done. Go to your website and you will see that a new deployment done!

-❤️~.

If you have any questions you can send me a message on Twitter or facebook. Also you can check my Github page, my iOS Apps, or Android Apps 1 / Android Apps 2.