Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications (Mobile, Web, Desktop) from a single codebase.

Firebase Hosting provides fast and secure hosting for your web app, static and dynamic content, and microservices. With a single command, you can quickly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network).

In this blog post, I will show you how to deploy a Flutter web app to Firebase manually.

1. Create a Flutter web app (Skip this step if you have a Flutter web project already)

First, you need to download Flutter SDK to create your Flutter app. Go to Flutter’s Installation page and follow the instructions to install the Flutter framework. After you have installed the SDK, you can create your application.

Open your terminal and run the following command

flutter create web_example

This command will create a project inside the web_example folder. 
We may run and debug our project in a Chrome browser by running the below command.

cd web_example
flutter run -d chrome

 

2. Build Release a Flutter project for web

Open your terminal, navigate to project folder and run the following command

flutter build web

After building is completed, contents are contained in /build/web folder as below

3. Create a project on Firebase

From browser, go to Firebase console with your Google Account and create a project in 3 steps:

 

 

After the project is created, it will be as below

4. Initialize Firebase Hosting

If you haven't installed Firebase CLI, please follow the installation document to install it.

Run below command to log in Firebase

firebase login

Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? 

You can enter No or Yes.

A browser will be opened to link your Google Account.

 

Select "Allow" to Firebase CLI access your Google Account 

Now your Google Account logged in Firebase successfully, you are able to start to initialize Firebase Hosting.

Run below commands:

firebase init hosting

Step by step, select options as below:

? Are you ready to proceed? --> Yes

? Please select an option: --> Use an existing project

? Select a default Firebase project for this directory: --> web-example-72287 (web-example)

? Detect an existing Flutter codebase in the current directory, should we use this? --> No

? Do you want to use a web framework? --> No

? What do you want to use as your public directory? --> build/web

? Configure as single-page app (rewrite all urls to /index.html)? --> Yes

? Setup automatic builds and deploys with Github? --> No

? File build/web/index.html already exists. Overwrite? --> No

 

5. Deploy to Firebase Hosting

Now, deploy the web app to Firebase Hosting by single command

firebase deploy

After deploy complete, we can check info of site in Firebase Hosting console

And here is the web-example site after being deployed to Firebase Hosting

Conclusion
Deploy a web app to Firebase Hosting is simple so it will reduce time and effort needed. Besides support manual deployment, Firebase Hosting also support automatic build and deploy with Github.

Firebase Hosting is a great choice to host your web application because it supports a lot of features besides basic hosting such as custom domains, HTTPS, and the scalability to handle huge amounts of traffic. 

Refer to Firebase Hosting to learn more.