DEV Community

Cover image for Firebase Hosting for Flutter Web: What Actually Works (and What Breaks)
Codexlancers
Codexlancers

Posted on

Firebase Hosting for Flutter Web: What Actually Works (and What Breaks)

#flutter #web #firebase

When we first started deploying Flutter web apps, Firebase Hosting felt like the obvious choice.

It's fast, reliable, and backed by Google - but like most "easy" tools, things get tricky the moment you move beyond the basics.

In this blog, we're not just covering setup. We're sharing what actually works in real projects, the mistakes we've seen (and made), and a few things most guides don't talk about.

Why We Prefer Firebase Hosting for Flutter Web

We've tried different hosting solutions, but Firebase keeps coming back into our workflow for a few solid reasons:

  • Global CDN out of the box - your app loads fast everywhere
  • Free SSL - no extra configuration headaches
  • Simple deployment - one command and you're live
  • Version control with previews -helpful for testing before pushing to production

For most Flutter web apps, especially MVPs and dashboards, it just makes sense.

Quick Setup (The Practical Version)

Instead of overcomplicating things, here's the version that works:

1. Install Firebase CLI 

npm install -g firebase-tools
Enter fullscreen mode Exit fullscreen mode

2. Login & Initialize 

firebase login
firebase init
Enter fullscreen mode Exit fullscreen mode

While initializing:

  • Select Hosting
  • Choose your Firebase project
  • Set build folder to: 
build/web
Enter fullscreen mode Exit fullscreen mode
  • Configure as a single-page app (SPA) → YES

3. Build Flutter Web 

flutter build web
Enter fullscreen mode Exit fullscreen mode

4. Deploy 

firebase deploy
Enter fullscreen mode Exit fullscreen mode

That's it - your Flutter web app is live.

But honestly, this is the easy part. The real issues start after deployment.

The "#" in Flutter Web URLs (And Why You Should Care)

If you've deployed your app and see URLs like this:
"yourdomain.com/#/dashboard"

That # is coming from Flutter's default routing strategy.

Why it exists

Flutter uses hash-based routing because:

  • It avoids server configuration
  • Works out-of-the-box on any hosting

But

Why we remove it

From our experience, keeping # in URLs is not ideal:

  • Looks unprofessional
  • Bad for SEO
  • Harder to share clean URLs
  • Not aligned with modern web standards

How We Remove "#" from Flutter Web URLs

We switch to Path URL Strategy.

Step 1: Add this in main.dart 

import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void main() {
  setUrlStrategy(PathUrlStrategy());
  runApp(MyApp());
}
Enter fullscreen mode Exit fullscreen mode

Step 2: Update Firebase Hosting Rewrite

In firebase.json, make sure you have:

"rewrites": [
  {
    "source": "**",
    "destination": "/index.html"
  }
]
Enter fullscreen mode Exit fullscreen mode

Result

Now your URLs look clean:
"yourdomain.com/dashboard"

This small change makes a big difference in production apps.

Common Mistakes We See (Again and Again)

This is where most developers struggle - not in setup, but in the details.

1. Forgetting SPA Rewrite

Without rewrites, refreshing any route gives a 404 error.

We've seen this happen in production apps - easy to miss, painful to debug.

2. Deploying Without Testing Build

Running locally ≠ production build.

We always run:

flutter build web
Enter fullscreen mode Exit fullscreen mode

and test the build/web folder before deploying.

3. Ignoring Cache Issues

Firebase aggressively caches files.
So when updates don't reflect:

  • Users still see old UI
  • API changes don't appear

Fix: Use proper cache headers or versioning.

4. Not Optimizing Build Size

Flutter web builds can get heavy.
Common mistakes:

  • Large images
  • Unused assets
  • Debug mode builds

We always:

  • Compress assets
  • Use - release build
  • Avoid unnecessary packages

5. Not Handling Environment Config Properly

Hardcoding API URLs is a common mistake.
Instead, we:

  • Use environment-based configs
  • Keep dev and prod setups separate

What We've Learned After Multiple Deployments

After working on multiple Flutter web projects, a few patterns are clear:

  • Firebase Hosting is great for speed and simplicity
  • Most issues come from configuration, not code
  • Small things (like URL strategy) make a big production difference

When Firebase Hosting Might Not Be Enough

We still use Firebase a lot, but it's not perfect for everything.
You might outgrow it if:

  • You need advanced server-side rendering
  • You want full backend control
  • You're building SEO-heavy public platforms

For dashboards, admin panels, internal tools - it's still one of the best choices.

Final Thoughts

Firebase Hosting + Flutter Web is a powerful combo - but only if you handle the details right.

Most tutorials stop at deployment.
Real-world apps fail in the gaps after that.

If you:

  • Fix routing properly
  • Avoid common mistakes
  • Optimize your build

you'll have a fast, clean, production-ready web app.

If you're working on Flutter web and stuck somewhere, chances are it's one of these small things - we've been there too.

Top comments (0)