- Introduction

Flutter web recently hits the stable milestone, meaning the web is officially another platform to build your flutter projects on. In this tutorial, we will learn how to deploy our flutter web app using firebase.

- Prerequisite:

Create and push your Flutter project to a GitHub repository.

Create a new project on the Firebase console to create a new project on the Firebase console visit Firebase console. With that out of the way let's dive into it.

- Download the Firebase CLI

To begin using Firebase in your project you need to download firebase tools. You can download firebase tools manually from firebase official docs. Alternatively, if you have Node.JS installed on your machine running npm install -g firebase-tools in the terminal would download firebase tools.

- Login to your Firebase account

After the installation of Firebase tools run firebase login in your app directory to log in to your Firebase account. You would be prompted to grant permission to Firebase to link your Firebase account to your project.

- Initialization and project setup

To initialize a new Firebase project for hosting, run the following command from within your app's directory: firebase init hosting

Type in “Y” to proceed to project setup

select “use an existing project”. Projects in your Firebase will be displayed and you get to choose which project you want to deploy on

- Hosting setup

Set your public directory as build/web and accept other prompts to configure to a single page app and set up automatic builds with GitHub.

You would be asked which GitHub repository you would like to set up a GitHub workflow, choose the GitHub repository with your in it. In the format user/repository name. It will set up an account FIREBASE_SERVICE_ACCOUNT for your project. You can choose to run a build script before every deployment, set npm run build as the build script to run. You can read more about the build script here. Note: Running a build script is not compulsory. If you do not wish to run a build script you could disagree and proceed.

- Final Step

At this point, firebase initialization must have been successfully completed. run flutter build web in your app directory. Finally, run firebase deploy --only hosting to host. Wait for few seconds and you get a URL to your hosted web app. Congratulations you have successfully hosted your web app.