Deploying a Flutter Web App to Firebase Hosting for the First Time

Introduction

Flutter’s web support has matured to the point where deploying your single-page application to a global CDN is a few commands away. Firebase Hosting offers a fast, secure, and scalable way to serve Flutter web apps with minimal configuration. In this tutorial, you’ll learn how to take a simple Flutter web project, configure Firebase Hosting, and deploy your app for the first time. By the end, you’ll have a live URL that you can share with the world.

Prerequisites

Before you begin, make sure you have:

• Flutter SDK installed and added to your path (version ≥2.5).

• A Flutter project set up for web (run flutter create my_app to start).

• Node.js and npm installed (required by the Firebase CLI).

• A Google account with a Firebase project created at console.firebase.google.com.

Building the Flutter Web App

1. Enable web support (if not already):
   

   flutter channel stable
   flutter upgrade
   flutter config --enable-web

2. Navigate to your project root (cd my_app).

3. Test your app locally in Chrome:
   

   flutter run -d chrome

4. Build the optimized web bundle:
   

   flutter build web

   This creates a build/web folder containing index.html, CSS, JS, and asset files optimized for production.

Optional: Verify that your web/index.html has a proper base href:

<base href="/">

Initializing Firebase Hosting

1. Install the Firebase CLI globally:
   

   npm install -g firebase-tools

2. Authenticate with Firebase:
   

   firebase login

3. From your project root, run:
   

   firebase init hosting

4. During initialization:
   • Select your Firebase project from the list.
   • Set build/web as the public directory.
   • Choose No for configuring as a single-page app? → Yes (this rewrites all URLs to index.html).
   • Decline automatic builds if you want manual control.

This creates two new files:

• firebase.json (hosting configuration)

• .firebaserc (project aliases)

Sample firebase.json extract:

{
  "hosting": {
    "public": "build/web",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      { "source": "**", "destination": "/index.html" }
    ]
  }
}

Deploying to Firebase Hosting

With your web app built and hosting initialized, deployment is a one-command process:

firebase deploy --only hosting

The CLI will upload your build/web folder to Firebase’s CDN. At completion, you’ll see an HTTPS URL like:

Visit the Hosting URL in your browser. Your Flutter web app should load instantly, delivered via Firebase’s global edge network.

Dart Snippet: Minimal Main Entry

Below is a simple Dart entry point that you might deploy. It displays a greeting after successful provisioning of Firebase Hosting.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hello Firebase Hosting')),
        body: Center(child: Text('Deployed with Flutter & Firebase!')),
      ),
    );
  }
}

Vibe Studio

For those looking to accelerate full-stack development even further, consider Vibe Studio. Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

Congratulations! You’ve successfully deployed your first Flutter web application using Firebase Hosting. Firebase Hosting provides SSL by default, global caching, and support for custom domains. Next steps might include:

• Setting up CI/CD to auto-deploy on Git pushes.

• Configuring a custom domain with Firebase’s managed certificates.

• Integrating other Firebase services like Firestore or Authentication for dynamic apps.