Deploying FlutterFlow Web Apps to Firebase Hosting with Custom Domains and GitHub CI/CD: A Step-by-Step Guide

In today’s fast-paced digital world, startup founders need efficient, automated workflows to deploy high-quality web applications rapidly. This guide will walk you through deploying your FlutterFlow web app to Firebase Hosting using GitHub CI/CD. We cover every step in detail—from integrating your FlutterFlow project with GitHub to setting up Firebase Hosting and creating a fully automated deployment pipeline. This comprehensive guide is brought to you by Nocode Solutions, your partner in NoCode and AI innovation.

For a visual overview, watch our YouTube tutorial.

Overview

This guide explains how to:

• Integrate FlutterFlow with GitHub: Set up your FlutterFlow project to push changes to a GitHub repository.
• Configure Firebase Hosting: Prepare your Firebase project, create a service account, and set up hosting configurations.
• Secure Your CI/CD Pipeline: Use GitHub repository secrets to securely store sensitive data.
• Automate Deployments with GitHub Actions: Create a workflow that builds your Flutter web app and deploys it automatically when changes are pushed.

Prerequisites

Before you start, ensure you have:

• A FlutterFlow account.
• A GitHub account and repository.
• A Firebase project set up.
• Basic familiarity with Git, CI/CD practices, and web app development.

Step 1: Setting Up the GitHub Repository

1. Create a New Repository:
   Log in to your GitHub account and create a repository (e.g., flutterflow-deployment).
2. Branch Structure:
   FlutterFlow will push your code to a dedicated branch (commonly named flutterflow). This branch acts as the staging area for new changes.

Step 2: Integrating FlutterFlow with GitHub

1. Configure Integration in FlutterFlow:
   • Open your FlutterFlow project.
   • Navigate to the project settings and locate the GitHub integration section.
   • Connect your GitHub account and authorize the FlutterFlow GitHub App to access your repository.
   • Select the repository you created to ensure FlutterFlow can push updates automatically to the flutterflow branch.
2. Automated Code Pushes:
   Once configured, any changes made in FlutterFlow will be pushed to your GitHub repository, keeping your code in sync.

Step 3: Creating a Deployment Branch

For production deployments, it’s best to use a separate branch:

1. Create the Live Branch:
   From the flutterflow branch, create a new branch called live. This branch is dedicated to deployments, ensuring that only tested and approved code reaches your live environment.
2. Branch Management:
   All deployments will be triggered from the live branch, keeping your development and production workflows distinct.

Step 4: Configuring Firebase Hosting

1. Access Firebase Console:
   Sign in to the Firebase Console.
2. Locate Your Project ID:
   In your Firebase project settings, copy the Firebase Project ID.
3. Set Up a Service Account:
   • Open the corresponding Google Cloud project.
   • Create a new service account with the Firebase Hosting Admin role.
   • Generate a new JSON key for this service account and copy the key content. This key will authenticate your deployments.

For more details, check the Firebase documentation on service accounts.

Step 5: Adding Repository Secrets in GitHub

To securely store sensitive credentials:

1. Navigate to Repository Secrets:
   In your GitHub repository, go to Settings > Secrets.
2. Add Required Secrets:
   • FIREBASE_PROJECT_ID: Paste your Firebase Project ID.
   • FIREBASE_SERVICE_ACCOUNT: Paste the contents of your JSON key.

These secrets are used by GitHub Actions to authenticate your deployment to Firebase securely.

Step 6: Creating the Firebase Configuration File

Create a firebase.json file at the root of your repository to instruct Firebase Hosting how to serve your Flutter web app:

{
  "hosting": {
    "public": "build/web",
    "cleanUrls": true,
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [
      {
        "source": "**/*.@(js|css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31536000"
          }
        ]
      }
    ]
  }
}

This configuration:

• Specifies the output directory: "build/web" where the Flutter web build is located.
• Enables clean URLs: Enhances the user experience.
• Manages caching: Sets long-term caching for JavaScript and CSS files.

For additional details, refer to the Firebase Hosting documentation.

Step 7: Setting Up GitHub Actions for CI/CD

Create a GitHub Actions workflow to automate the build and deployment process:

1. Directory Structure:
   Inside your repository, create the directory .github/workflows/.
2. Create the Workflow File:
   In the new directory, create a file named deploy.yml and add the following content:

name: FlutterFlow Firebase Deployment
on:
  push:
    branches:
      - live   # Replace with your desired branch to deploy from
    paths:
      - "lib/**"
jobs:
  build_web:
    name: Build Flutter (Web)
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: subosito/flutter-action@v1
        with:
          flutter-version: '3.27.3' # Replace with your project's Flutter version.
          channel: 'stable'
      - run: flutter pub get
      - run: flutter config --enable-web
      - run: flutter build web
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: web-build
          path: build/web
  deploy:
    needs: build_web
    runs-on: ubuntu-latest  
    steps:
      - name: Checkout
        uses: actions/checkout@v1
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: web-build
          path: build/web
      - name: Deploy to Firebase
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
          projectId: '${{ secrets.FIREBASE_PROJECT_ID }}'
          channelId: live

Workflow Breakdown:

• build_web Job:
  • Checks out the repository.
  • Sets up Flutter using the specified version.
  • Installs dependencies and enables web support.
  • Builds the web app and archives the output.
• deploy Job:
  • Retrieves the archived build.
  • Uses Firebase’s GitHub Action to deploy the build to Firebase Hosting securely.

This setup ensures that every change pushed to the live branch is automatically built and deployed.

Step 8: Triggering the Deployment

With your CI/CD pipeline configured, triggering a deployment is straightforward:

1. Push Changes from FlutterFlow:
   Make updates in your FlutterFlow project; the changes are automatically pushed to the flutterflow branch.
2. Merge to Live Branch:
   Create a pull request to merge the flutterflow branch into the live branch.
3. Automated Deployment:
   Merging triggers the GitHub Action, which builds your web app and deploys it to Firebase Hosting.
4. Verify Deployment:
   Visit your Firebase project’s Hosting tab to confirm the deployment. You can then configure a custom domain by following Firebase’s custom domain setup guide.

Conclusion

Deploying your FlutterFlow web app to Firebase Hosting via GitHub CI/CD streamlines your development workflow and ensures reliable, continuous updates. This guide provided detailed instructions—from setting up your GitHub repository and configuring FlutterFlow, to securing your Firebase project and automating deployments using GitHub Actions.

For startup founders looking to leverage the latest in NoCode and AI development, this process minimizes manual intervention and maximizes efficiency. For more insights, technical guides, and cutting-edge solutions, visit Nocode Solutions.

Happy deploying!