Flutter Web + Firebase Hosting with GitHub Actions: Step-by-Step Tutorial

 

Flutter Web and Firebase Hosting Tutorial

In addition to mobile apps, Flutter supports generating web content using standards-based technologies like HTML, CSS, and JavaScript. With web support, Flutter code written in Dart can be compiled into a client-side experience, embedded in the browser, and deployed to any web server. Firebase Hosting offers fast and secure hosting for web apps, static and dynamic content, and microservices. GitHub Actions help automate, customize, and execute software development workflows directly in your repository.

Video Demonstration of this Tutorial

⚙️ Setting Things Up…

In this first step, we’ll set up three things:

  1. Create a GitHub repository
  2. Create a Flutter Web project and push it to the repository
  3. Create a Firebase project for hosting

1. Creating a GitHub Repository

Head to GitHub and create a new repository. Although the repository name doesn’t matter, ensure it follows Dart package naming conventions for consistency, as this will affect our script for GitHub Actions workflows. Once the repository is created, it should look something like this.

Next, clone the repository. If you're on Ubuntu 20.04, open a terminal with Ctrl+Alt+T and run:


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

In this case, I cloned the repository inside my home directory. After cloning, create a new Flutter Web project inside it.

2. Create a Flutter Web Project and Push it to the Repository

Basic Flutter Web setup instructions can be found here. You’ll need the Flutter SDK, Chrome (or an equivalent browser), and an IDE (I prefer VS Code) with the Flutter and Dart plugins installed. Once you have that ready, run these three commands:


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

Now, navigate to the cloned repository directory and run:


flutter create .

After this command completes successfully, you should see a new Flutter Web project created. Finally, push everything to GitHub with the following commands:


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

3. Create a Firebase Project

The last setup step is to create a Firebase project for hosting our web application. This process is fairly simple. Follow the step-by-step instructions with screenshots here.

➕ Adding Firebase to Our Flutter Web Project…

Now, let’s integrate Firebase with our Flutter project for hosting. This involves two parts:

  1. Installing the firebase-tools CLI
  2. Initializing Firebase, then building and deploying the app

1. Install the Firebase-Tools CLI

First, we’ll need npm. Since we’re using Ubuntu 20.04, install npm with:

sudo apt install npm

For Windows and macOS users, follow the installation guide here. After installation, verify it by typing:

npm -v

Now install the Firebase CLI globally using npm:

sudo npm install -g firebase-tools

2. Initialize Firebase, Build, and Deploy

After installing the Firebase CLI, log in to your Firebase account:

firebase login

If you want to log in with a different account, first log out using:


firebase logout

After logging in, navigate to your Flutter Web project root directory and initialize Firebase:

firebase init

When prompted, select the Firebase services you need (in this case, Hosting), then select your existing Firebase project created earlier (e.g., flutter-web-test-3d9eo). For the public directory, use build/web. Choose Yes for single-page app configuration and automatic builds and deploys using GitHub Actions. Login to GitHub via Firebase CLI, then select the repository you created in Step 1.

To provide a build script for deployment, use:


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

This installs Flutter, configures web support, and builds the project. Select Yes to enable automatic deployment after pull requests (PRs) are merged, and specify the branch (e.g., main).

🎊 Deploying to Firebase Hosting

Firebase is now initialized! To build and deploy your web app, run these commands from the root directory:


flutter build web
firebase deploy

Visit your live web app at:
https://flutter-web-test-3d9e0.web.app/

🦸 GitHub Actions and Automatic Deployment

You’ll now see two workflows under GitHub Actions for automatic deployment. Each time you commit to the main branch or merge a PR, these workflows will run and, upon successful deployment, be marked in green. You can also make changes to the code, commit them, and see those changes automatically reflected on your live app after a successful deployment run.

As always, Happy Hacking! 😃

Previous Post Next Post