DEV Community

Cover image for Flutter Web x Firebase Hosting - GitHub Action
Chris Boik
Chris Boik

Posted on

Flutter Web x Firebase Hosting - GitHub Action

My Workflow

This GitHub Actions workflow assists Flutter developers specifically outputting to Web.
Please see the additional resource below to stay up-to-date with the required tools for this workflow to work.

The YAML files below are partially auto-generated by the Firebase CLI when setting up hosting but require additional DIY steps included for you to use directly after replacing the placeholders with the names of your secrets, project IDs, and preferred hosting channels.

Submission Category:

DIY Deployments

Yaml Files

Deploy to Firebase Hosting on Merge
# This file was PARTIALLY auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - master
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: subosito/flutter-action@v1 #required (unofficial as no official tool exists, yet!)
        with:
          channel: 'stable' # or: 'beta', 'dev' or 'master'
      - run: flutter pub get && flutter build web
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.YOUR-FIREBASE-SERVICE-ACCOUNT-SECRET-NAME }}'
          channelId: live #Your preferred Firebase channel
          projectId: YOUR-PROJECT-ID

Enter fullscreen mode Exit fullscreen mode

Deploy to Firebase Hosting on PR
# This file was PARTIALLY auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
  build_and_preview:
    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: subosito/flutter-action@v1 #required (unofficial as no official tool exists, yet!)
        with:
          channel: 'stable' # or: 'beta', 'dev' or 'master'
      - run: flutter pub get && flutter build web
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.YOUR-FIREBASE-SERVICE-ACCOUNT-SECRET-NAME }}'
          projectId: YOUR-PROJECT-ID



Enter fullscreen mode Exit fullscreen mode

Additional Resources / Info

This workflow wouldn't be possible without the brilliant:

GitHub logo subosito / flutter-action

Flutter environment for use in actions. It works on Linux, Windows, and macOS.

Discussion (6)

Collapse
jimmythemoose93 profile image
jimmythemoose93

noice

Collapse
jimmythemoose93 profile image
jimmythemoose93

was really good

Collapse
mysticza profile image
Chris Boik Author

Glad to help 🤠
Hopefully Flutter Web has official docs for this soon!

Collapse
hyperion56 profile image
JordanHopcroft

I needed this, thanks man

Collapse
joshmunstermann profile image
Josh Munstermann

Super informative and useful thank you !

Collapse
dsbehn profile image
Denim Šime Behn

To be honest I don't use flutter too much but this is quite informative and seems like it would be quite useful. Keep up the good work!