Taking Your Flutter Web App to the Cloud with GitHub Actions and Firebase Hosting

Hey there, Flutter enthusiast! Ready to unleash your web app to the world? Buckle up because we're about to embark on an adventure into the cloud with GitHub Actions and Firebase Hosting. Let's deploy your Flutter web app like a pro!

‍

The Fluttering Journey Begins

Flutter, our trusty sidekick, is the ultimate tool for crafting stunning web apps. But to truly set it free on the web, we need a hero. That hero is GitHub Actions, here to automate the deployment process.

‍

Prerequisites: Equip Your Arsenal

Before we embark on our journey, here's what you need:

‍

• A Flutter web app that's itching to go live.
• A GitHub repository to house your Flutter project.
• Firebase powers, so ensure you have a Firebase account.

‍

Step 1: Forge Your Firebase Project

1. Open the Firebase Console: First, venture into the Firebase Console. If you don't have a Firebase project yet, create one like a true explorer.

‍

2. Project Settings: In the Firebase Console, head to "Project Settings." Here, you'll find your Firebase Project ID. Note it down, it'll come in handy later.

‍

Step 2: Store Secrets in the Treasure Chest

Security is crucial, so keep your Firebase credentials safe. Let's store them in the GitHub repository as secrets.

‍

1. GitHub Repository Secrets: Go to your GitHub repository, and navigate to "Settings" > "Secrets."

‍

2. Create Secrets: Here, you'll create two secrets: `FIREBASE_PROJECT_ID` (store your Firebase Project ID) and `FIREBASE_SERVICE_ACCOUNT` (store your Firebase Service Account JSON). How to get one?

‍

Step 3: Prepare for Action

Time to don your GitHub Actions armor. Create a GitHub Actions workflow file, perhaps naming it `deploy.yml`. Here's your GitHub Actions script, ready for deployment:

‍

# Your GitHub Actions workflow file here
name: Deploy App to Firebase Hosting
on:
  push:
   branches:
      - main
    paths:
      - "lib/**"

jobs:
  build_and_preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-java@v1
        with:
          java-version: "12.x"
      - uses: subosito/flutter-action@v1
        with:
          channel: "stable"
      - run: flutter pub get
      # use this if you need generate build_runner related files
      - run: dart run build_runner build --delete-conflicting-outputs
      - run: flutter build web --source-maps --web-renderer=canvaskit
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'  
          projectId: '${{ secrets.FIREBASE_PROJECT_ID }}'
          target: YOUR_DEPLOYMENT_TARGET
          

‍

Now let’s talk about the file we just added to understand it very clearly. This GitHub Actions workflow is designed to automate the deployment process of a Flutter web app to Firebase Hosting. It ensures that your web app is consistently deployed to Firebase Hosting whenever changes are pushed to specific branches in your repository.

‍

Workflow Triggers

The workflow is triggered by the following events:

‍

• push: This workflow is initiated when changes are pushed to the repository.
• branches: It runs when changes are pushed to the "main" branch.

• It is also configured to trigger based on changes in the "lib" directory, ensuring that the workflow deploys when there are updates to the app's source code.

‍

Workflow Steps

Step 1: Check Out the Repository

uses: actions/checkout@v2

This step checks out the repository's contents, allowing subsequent steps to work with the codebase.

‍

Step 2: Set Up Java Environment

uses: actions/setup-java@v1

It sets up a Java environment with a specified Java version (in this case, "12.x"). This might be useful for running certain tools or dependencies.

Step 3: Set Up Flutter

uses: subosito/flutter-action@v1

This step installs Flutter and sets its channel to "stable." Flutter is a crucial tool for building and deploying your Flutter web app.

‍

Step 4: Get Flutter Dependencies

run: flutter pub get

This command fetches the project's dependencies, ensuring that the app has access to the necessary libraries and packages.

‍

Step 5: Generate Build Runner Files (Optional)

run: dart run build_runner build --delete-conflicting-outputs

This step is optional and is used to generate build runner-related files. Build runner is a tool for generating code or assets in a Flutter project.

‍

Step 6: Build the Flutter Web App

run: flutter build web --source-maps --web-renderer=canvaskit

This command builds the Flutter web app with specific options:

--source-maps: It generates source maps for debugging purposes.

--web-renderer=canvaskit: Specifies the web renderer to use, in this case, "canvaskit."

Step 7: Deploy to Firebase Hosting

uses: FirebaseExtended/action-hosting-deploy@v0

This step deploys the built Flutter web app to Firebase Hosting. It's a critical part of the workflow and requires various inputs to function correctly.

‍

repoToken: It uses the GitHub token (GITHUB_TOKEN) as a secure means of authentication to interact with GitHub's API during the deployment process. You don't need to set this secret yourself - GitHub sets it automatically.

firebaseServiceAccount: This should be set to the path or content of your Firebase Service Account JSON file. It provides the necessary credentials for Firebase Hosting deployment.

projectId: The Firebase Project ID is used to specify the Firebase project where the app will be deployed.

target: This should be set to your desired deployment target. If you leave this blank, the default target or all targets defined in the .firebaserc will be deployed. You usually want to leave this blank unless you have set up multiple sites in the Firebase Hosting UI and are trying to target just one of those sites with this action. Find more about it here.

Step 4: Push to the Battlefield

Commit the `deploy.yml` script to your GitHub repository’s main branch(or any branch/es you define in `deploy.yml`), and let the deployment commence.

‍

Step 5: Watch the Magic Unfold

With the GitHub Actions workflow in place, your app will automatically deploy whenever you make changes to the specified(main for this example) branch. Keep an eye on the GitHub Actions dashboard to witness the enchantment.

‍

Conclusion: Flutter to Victory

Congratulations, you're now the fearless captain of a ship set to conquer the digital seas. By automating your Flutter web app deployment with GitHub Actions and Firebase Hosting, you can focus on making your app even more fantastic while your deployment takes care of itself.

‍

Sail forth, brave Flutter developer, and may your web app journey be filled with success!

‍

There you have it! Deploying your Flutter web app is an exciting adventure that can be both efficient and fun. Customize the journey to suit your needs, and let your web app set sail to victory. Happy coding and deploying, intrepid developer!