Firebase Hosting and Automatic Deployment with GitHub Actions for Flutter-web

Published in

The Startup

6 min readJan 19, 2021

In addition to mobile apps, Flutter supports the generation of web content rendered using standards-based web technologies: HTML, CSS, and JavaScript. With web support, one can compile existing Flutter code written in Dart into a client experience that can be embedded in the browser and deployed to any web server. Firebase Hosting provides fast and secure hosting for web apps, static and dynamic content, and microservices. GitHub Actions help automate, customize, and execute software development workflows right in our repositories.

Video Demonstration of this tutorial

⚙️ Setting things up…

In this first step, we’ll set up 3 things, namely,

Create a GitHub repository.
Create a Flutter Web project and push it to our created repository.
Create a Firebase project to set up hosting.

1. Creating a GitHub Repository -

We’ll head to Github and create a new repository. Here’s how it should look. Although it doesn’t matter, still for the purpose of this blog, make sure your repository name is in accordance with the dart package name conventions found here. This is because we’ll directly create a flutter web project after cloning this repository, and later this will also affect the script we use in the GitHub Actions workflows. Here is how it should look in the end.

The next obvious step is to clone the repository. I’m on Ubuntu 20.04, so we’ll open a terminal with Ctrl+Alt+T, and paste the following (after moving to my desired directory).

git clone https://github.com/Imperial-lord/flutter_web_test.git

In my case, I cloned in inside my home directory. Next, we’ll go ahead and create a new flutter-web project inside it.

2. Create a Flutter Web project and push it to the repository -

The basic set up for Flutter Web can be found here. It involves installing the Flutter SDK, Chrome (or equivalent) browser, and an IDE (in prefer VS Code) with Flutter and Dart plugins. After that running, the following 3 commands sequentially will do the job.

flutter channel beta
flutter upgrade
flutter config --enable-web

Next, we will go to our directory we got after cloning the repo and paste the following command in a terminal (opened inside the directory).

flutter create .

When run successfully you should see something like this at the end.

Finally, we’ll push everything to GitHub, by using the following commands.

git add .
git commit -m "initialized project"
git push

3. Create a firebase project -

Now the last step is to create a Firebase project to set up hosting for our application. This is fairly simple, and I’ll just add step by step screenshots.

Now we’re all set up! Let’s move to the next step.

➕ Adding Firebase to our Flutter Web Project…

Now it’s time to add Firebase to our Flutter Project and set it up for hosting. We’ll do this step in 2 parts:

Install firebase-tools CLI
Initialize Firebase and then build and deploy.

1. Install the firebase-tools CLI -

For this, we’ll need npm first. Since we’re following this blog on Ubuntu 20.04, we’ll install npm by

sudo apt install npm

For windows and mac users, head here. After successful installation, just type npm -v on a terminal to see if it returns the version number. Now that npm is installed, we need to install firebase-tools CLI.

sudo npm install -g firebase-tools

2. Initialize Firebase and then build and deploy -

The first thing to do after installing firebase-tools CLI is to log in. For this in your terminal type the command:

firebase login

☝🏻Note that if you want to login with a different account, first log out using firebase logout and then login again!

Shortly after the command is typed a browser window opens up, and you’ll be logged in after choosing a Google account and accepting the permissions. Here’s how it’ll finally look on the browser window and the terminal.

Next, we need to navigate to the root directory of our Flutter Web app and type the command:

firebase init

This will initialize Firebase in our project. The first thing it asks for is to select the Firebase services that we need. In this case, we require Hosting services, so we’ll navigate to that and select using the space bar, and then press enter.

We then need to assign the Firebase Project we created in Step 1.3, to this Flutter Web project. For this, we’ll choose, Use an existing project, and then select the project we made earlier, i.e, flutter-web-test-3d9eo

Next, choose build/web as the public directory, yes for the single-page-app configuration and yes to set up automatic builds and deploys with GitHub. This will need you to login into GitHub via Firebase CLI. We’ll now choose the repository we made in Step 1 and put it in the required format to set up a GitHub workflow.

The final step is to provide a build script to run before every deployment, and for this purpose, we’ll use

sudo snap install flutter --classic && flutter channel beta && flutter config --enable-web && flutter build web

This effectively installs flutter, and configures the web, and then builds the recent changes to the project before deployment. Additionally, select Yes, to automatically deploy after PRs are merged, and also select the branch that you wish to deploy (in my case main).

That’s all… Firebase initialization is complete! 🎊 Just build and deploy by running these commands from the root directory -

flutter build web
firebase deploy

Visiting https://flutter-web-test-3d9e0.web.app/, we find our web app hosted!

🦸 GitHub Actions and Automatic Deployment…

We can now, push everything to GitHub, and we’ll see that there are 2 workflows under GitHub Actions for automatic deployment, every time we either commit to the main branch or merge a PR. There will be several runs for the workflows and runs that are successfully deployed will be marked in green.

You can even make changes to the website code, and make a commit again, the changes will automatically show up at https://flutter-web-test-3d9e0.web.app/ after the run is successful!