Firebase Hosting — Flutter 💛💙

Well, it’s always fun to create a web app using Flutter. But how will you show your web app to others without hosting it? Let’s see how you can host your flutter web app using Firebase Hosting 🥳

Published in

Google Developer Experts

4 min readJul 28, 2022

Firebase is one of the most convenient backend tools for Flutter. Flutter + Firebase is actually a fantastic combination because of the services provided and easy integration. Feel free to check out my other articles on Firebase for its other features.

Firebase Hosting allows us to host our web app, not just Flutter Web App, but any website that you have created in a very easy, simple and completely free way! Benefits of using Firebase Hosting:

Deliver web content fast
With Firebase Hosting, you can deploy a single-page web app, a mobile app landing page, or a progressive web app without all the hassle.
SSD-backed hosting, around the globe
No matter where a user is, content is delivered fast. Files deployed to Firebase Hosting are cached on SSDs at CDN edge servers around the world.
Free SSL certificates for custom domains
Firebase Hosting automatically provisions and configures an SSL certificate for each site deployed. Connect a custom domain with painless verification.
Deploy with one command
Deploying your app from a local directory to the web only takes one command. See deployment history and roll back to a previous version from the Firebase console.
Preview changes before going live
Channels allow you to preview updates of your site. Allow team members to view progress easily and give feedback, do code reviews, and test.

Now, let’s see how you can host your Flutter Web App using Firebase!

Step 0: Create a Firebase Project

The pre-requisite step is to create a Firebase project by going to Firebase Console and registering your app into it. In this article, we assume that you have already done that 😉

Step 1: Install firebase-tools CLI

The firebase-tools CLI can be installed using npm . So before moving forward, you have to install npm into your system if you don’t have one already installed. You can install npm by referring to the following:

Or you can download it directly from node.js website!

Once done, you can run the following command to install firebase-tools CLI

npm install -g firebase-tools

Step 2: Initialize your project

The next step is to initialize your project. To do that, you have to log in to firebase from your terminal:

firebase login

Once logged in, you have to initialize your project!

firebase init

When you run the above command, you will get an output as follows:

Now, use the arrow keys to reach Hosting and then click the spacebar when you reach Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys and finally, click enter!

After that, it will ask to select a project. Feel free to choose your suitable options.

Once the project is created/selected, the CLI will ask, What do you want to use as your public directory? In this, you can add build/web because this is the location where our flutter web app build will be available.

Next, CLI asks Configure as a single-page app (rewrite all urls to /index.html)? feel free to enter y!

Next, CLI asks Set up automatic builds and deploys with GitHub? (y/N) , feel free to choose your suitable answer.

And that’s it. Firebase Hosting Initialization is completed 🥳

Step 3: Build your Flutter Web App

The next step is to build your Flutter Web app. You just need to run flutter build web and the web app will be built and stored in build/web folder!