Flutter WebEasy20 XP4 min read
How do you deploy Flutter Web to Firebase Hosting and Vercel?
TL;DR: Build with 'flutter build web --release', then deploy build/web to Firebase Hosting or Vercel. Both require SPA rewrite config (serve index.html for all routes). Set no-cache on flutter_service_worker.js to avoid stale PWA updates.
Full Answer
Flutter Web builds to a static site in build/web. Static hosting platforms (Firebase Hosting, Vercel, Netlify) serve these files with CDN, HTTPS, and custom domain support.
Firebase Hosting
- ▸flutter build web --release --tree-shake-icons
- ▸firebase init hosting → public: build/web, single-page app: yes
- ▸Add rewrites in firebase.json: '**' → '/index.html'
- ▸firebase deploy --only hosting
Vercel
- ▸Build command: flutter build web --release
- ▸Output directory: build/web
- ▸Add SPA rewrite in vercel.json: source '/(.*)', destination '/index.html'
- ▸Install Flutter in CI via Dart action or custom build script
Code Examples
jsonfirebase.json — SPA rewrites + caching
Output
// Rewrite: /questions/flutter-core → index.html // Flutter router shows the right page // No-cache on service worker: prevents stale PWA versions // Immutable cache on bundles: fast repeat visits
Common Mistakes
- ✗Caching flutter_service_worker.js — users get stale app after deployment. Always set no-cache on the service worker
- ✗Forgetting the SPA rewrite — all routes except / return 404 on direct access or refresh
Interview Tip
💡
The two critical production configs: (1) SPA rewrite for path-mode routing, (2) no-cache on service worker. Missing either causes user-facing bugs that are hard to debug.
#deployment#firebase-hosting#vercel#flutter-web#SPA