Deploying a Flutter Web App to Firebase Hosting — A Complete Guide

FlutterPulse

This article was translated specially for the channel FlutterPulseYou'll find lots of interesting things related to Flutter on this channel. Don't hesitate to subscribe!🚀

Flutter's web support opens the door to building stunning cross-platform experiences that run directly in the browser. But once you've…

Flutter's web support opens the door to building stunning cross-platform experiences that run directly in the browser. But once you've built your app, where should you host it?

Firebase Hosting is one of the easiest and most reliable options — offering fast content delivery, a global CDN, and seamless HTTPS out of the box.

In this guide, we'll walk through how to deploy your Flutter Web App to Firebase Hosting in just a few steps.

✅ Prerequisites

Before jumping into deployment, make sure you have:

A Flutter web app ready (flutter build web)
A Firebase project set up (via the Firebase Console)
Firebase CLI installed
Node.js and npm installed

🏗 Step 1: Build Your Flutter Web App

First, open your terminal in the Flutter project root and build the web version:

flutter build web

This will generate a production-ready version of your app in the build/web directory.

🔧 Step 2: Install the Firebase CLI

If you haven't already installed the Firebase CLI, do it with npm:

npm install -g firebase-tools

Once installed, log in to Firebase:

firebase login

This opens a browser window where you can authenticate with your Google account.

🔌 Step 3: Initialize Firebase in Your Project

In your Flutter project root, run:

firebase init

You'll be prompted to:

Choose Firebase features → Select only Hosting
Choose a project → Link to your existing Firebase project
Set your public directory → Enter build/web
Configure as a single-page app? → Choose Yes
Overwrite index.html? → Say No (your Flutter app has its own)

This will create a firebase.json and .firebaserc file in your project root.

🚀 Step 4: Deploy to Firebase Hosting

Now you're ready to go live. Deploy with:

firebase deploy

After a few seconds, Firebase will give you a live hosting URL like:

✔  Hosting URL: https://your-app-name.web.app

And that's it — your Flutter Web app is now online!

🛠 Optional: Set Up a Custom Domain

Firebase makes it easy to connect a custom domain:

Go to the Firebase Console → Hosting
Click "Add Custom Domain"
Follow the steps to verify ownership and update your domain DNS
Firebase will automatically generate and manage HTTPS certificates

📦 Firebase Hosting Highlights

Global CDN: Ensures fast load times worldwide
HTTPS by default: Automatically enables secure connections
Instant rollbacks: One command and your previous version is back
Custom domains: Easily connect your own domain

🧪 Troubleshooting Tips

If assets like images or fonts don't load, ensure they're correctly referenced using AssetImage() or the pubspec.yaml.
Make sure you always run flutter build web before deploying.
If the app doesn't work on route refresh, verify that firebase.json has this rule:

"rewrites": [
  { "source": "**", "destination": "/index.html" }
]

🏁 Final Thoughts

Firebase Hosting is arguably the fastest and most developer-friendly way to host your Flutter Web app. With just a few CLI commands, you can deploy your work to a live URL, backed by a secure, global CDN.

So the next time you finish a Flutter web project, don't just test it locally — push it to Firebase and share it with the world.

🔥 Tip: You can automate this deployment with GitHub Actions or CI/CD tools later for more efficient workflows.

Happy deploying! 💻🌍✨

If you found this story helpful, you can support me at Buy Me a Coffee!