17  Firebase: Flutter Hosting

Q: Let’s say I’ve built a Flutter app with web target. This app is a front-end only app with no authentication or connection with external API or DB. This app repo is pushed to the GitHub. Give tutorial on how to deploy this app to the web using Firebase.

I’ll walk you through deploying your Flutter web app to Firebase Hosting step by step. Since you have experience with command-line tools and GitHub, this process will feel familiar while introducing you to Firebase’s deployment workflow.

17.1 Understanding Firebase Hosting

Firebase Hosting is Google’s web hosting service that’s particularly well-suited for static sites and single-page applications like Flutter web apps. Think of it as a content delivery network (CDN) that serves your built Flutter web files globally with excellent performance. Unlike traditional web servers, Firebase Hosting specializes in serving static assets with automatic SSL certificates and global edge caching.

17.2 Prerequisites Setup

Before we begin, you’ll need to install the Firebase CLI tools on your MacBook. Open your terminal and run:

npm install -g firebase-tools

This installs Firebase’s command-line interface globally, giving you access to deployment commands from any directory.

17.3 Step 1: Preparing Your Flutter Web Build

First, let’s ensure your Flutter app builds correctly for web deployment. Navigate to your Flutter project directory and create an optimized production build:

# Navigate to your project directory
cd path/to/your/flutter/project

# Build for web with optimizations
flutter build web --release

This command generates a build/web directory containing all the static files needed for web deployment. The --release flag ensures the build is optimized for production with minified code and smaller file sizes.

17.4 Step 2: Firebase Project Setup

Now you’ll create a Firebase project to host your application. Visit the Firebase Console and click “Create a project.” Choose a meaningful project name that reflects your app’s purpose.

During project creation, you can disable Google Analytics unless you specifically want usage tracking for your app. Since this is a frontend-only application, analytics might not be necessary initially.

17.5 Step 3: Firebase CLI Authentication

Back in your terminal, authenticate with Firebase using your Google account:

firebase login

This opens your browser for Google authentication. Use the same Google account you used to create the Firebase project. The CLI will store authentication tokens locally for future deployments.

17.6 Step 4: Initialize Firebase in Your Project

Navigate to your Flutter project’s root directory and initialize Firebase:

firebase init hosting

The initialization wizard will guide you through several important configuration choices:

When asked “Which Firebase project do you want to associate with this directory?”, select the project you created in Step 2.

For the public directory question, enter build/web. This tells Firebase where to find your built Flutter web files.

When asked about configuring as a single-page app, answer “Yes.” This is crucial for Flutter web apps because it ensures Firebase serves your index.html file for all routes, allowing Flutter’s client-side routing to work correctly.

If prompted about overwriting index.html, answer “No” to preserve Flutter’s generated index file.

17.7 Step 5: Understanding the Configuration

The initialization process creates a firebase.json file in your project root. This file should look similar to:

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

The rewrites section is particularly important for Flutter web apps. It ensures that any URL path serves the main index.html file, which then lets Flutter handle the routing internally.

17.8 Step 6: Initial Deployment

Now you’re ready to deploy your app:

firebase deploy

Firebase will upload all files from your build/web directory to their hosting servers. The process typically takes a few minutes depending on your app’s size and internet connection speed.

Upon successful deployment, Firebase will provide you with a hosting URL, typically in the format https://your-project-id.web.app or https://your-project-id.firebaseapp.com.

17.9 Step 7: Setting Up Automated Deployment (Optional but Recommended)

Since you’re already using GitHub, you can automate deployments whenever you push changes to your repository. This creates a smooth workflow where code changes automatically trigger new deployments.

In your Flutter project, create a GitHub Actions workflow file at .github/workflows/firebase-deploy.yml:

name: Deploy to Firebase Hosting
on:
  push:
    branches:
      - main  # or whatever your default branch is named

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      
      - name: Setup Flutter
        uses: subosito/flutter-action@v2
        with:
          flutter-version: '3.19.0'  # specify your Flutter version
      
      - name: Install dependencies
        run: flutter pub get
      
      - name: Build web app
        run: flutter build web --release
      
      - name: Deploy to Firebase
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
          projectId: 'your-firebase-project-id'

This workflow automatically builds and deploys your app whenever you push to the main branch. You’ll need to set up a Firebase service account and add it to your GitHub repository’s secrets for authentication.

17.10 Understanding the Deployment Process

When you run firebase deploy, several things happen behind the scenes that are worth understanding. Firebase first compresses and uploads your files to their content delivery network. It then configures routing rules based on your firebase.json settings and updates DNS records to point to the new version.

Firebase Hosting maintains version history, so you can easily rollback to previous deployments if needed. Each deployment gets a unique URL, and you can preview changes before making them live.

17.11 Custom Domain Setup (Optional)

If you want to use your own domain name instead of the default Firebase URL, you can configure custom domains through the Firebase Console. This process involves adding DNS records with your domain provider and waiting for SSL certificate provisioning.

17.12 Monitoring and Updates

After deployment, you can monitor your app’s performance and usage through the Firebase Console. The hosting section shows bandwidth usage, visitor counts, and deployment history.

For future updates to your app, the process becomes simple: build your Flutter app locally with flutter build web --release, then run firebase deploy to push the changes live.

This deployment approach gives you a robust, scalable hosting solution that automatically handles SSL certificates, global content distribution, and high availability. The combination of Flutter’s efficient web compilation and Firebase’s hosting infrastructure creates an excellent foundation for web applications.

Would you like me to elaborate on any particular aspect of this deployment process, such as setting up the automated GitHub Actions workflow or configuring custom domains?