Flutter Web x Firebase Hosting - GitHub Action

Chris Boik — Wed, 24 Nov 2021 09:57:44 +0000

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

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

Additional Resources / Info

This workflow wouldn't be possible without the brilliant:

subosito / flutter-action

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

Beautiful Chase RGB Glow Effect CSS

Chris Boik — Mon, 26 Apr 2021 15:36:34 +0000

As an extension to Nikhil's:

Amazing button hover with CSS

Nikhil Bobade ・ Apr 15 '21

#html #css #webdev #beginners

I have created a full 360° "chase" effect using an altered version of the original design.

With text effect:

Without text effect (better visual accessibility):

Please be sure to check out Nikhil's original post.
Comments welcome!

Forem: Chris Boik