Auto Deploy Flutter Web App to Firebase Hosting with Github Action
Auto Deploy Flutter Web App to Firebase Hosting on every commit.png

Auto Deploy Flutter Web App to Firebase Hosting with Github Action

Summary:

Deploying Flutter Web app to Github Pages on every update can be repetitive task. learn how to automate it so that whenever we will commit the latest version of our flutter web app will be deployed to Github Pages For Free by using Github Actions.

In this blog post, we will learn how to automate it so that whenever we will commit the latest version of our flutter web app will be deployed to Github Pages For Free by using Github Actions.

What is Github Actions?

Github actions help us to automate our workflow be it building apk, running test, hosting our app to Github, hosting a flutter web app to firebase hosting so that we can build test and deploy right from GitHub.

Get Started with Github Action For Flutter.

First lets integrate Github Action to our Github Repo.

when we integrate github action all the workflows and build will be visible here.

we have to create a custom workflow to auto-deploy of flutter app to GitHub pages, so just follow step by step

1.Creating workflow file

first go inside your main project directory and create a folder .github this will contain all the workflow.

Now create a workflow file let’s name it deploy.yml (you can name it whatever you want), workflow file has multiple keys we will discuss each one by one.

on:

Github action is executed following the events under on key. In this example we want to run it only when we push to master branch, you can add any of your preferred branches

name: Build, Release app to Github Pages and Firebase Hosting

on:
  push:
    branches:
      - master

job:

A workflow run is made up of one or more jobs that can run sequentially or in parallel.

runs-on:

runs-on define the virtual machine to run the job on, for our case we need ubuntu-latest.

Each ubuntu host machine contains different set of softwares and tools you can check them here.

jobs:
  # This workflow contains a single job called "build"
  build:
    runs-on: ubuntu-latest

steps:

sequence of tasks a job contain are called steps. These steps can be granular like one line command or a multiline with sequence of task pack together.

let’s go through the steps to meet our requirements.

steps:
  - uses: actions/checkout@v1
  - uses: actions/setup-java@v1
    with:
      java-version: '12.x'
  - uses: subosito/flutter-action@v1
    with:
      channel: 'dev'

we are using dev channel.

  • Now let’s get flutter dependencies
- name: 'Run flutter pub get'
  run: flutter pub get
  • Let’s configure flutter web or you can say enable flutter web
- name: Enable flutter web
  run: flutter config --enable-web
  • now build web
- name: 'Build Web App'
  run: flutter build web
  • deploy to Firebase hosting as well as github pages

for this we will need two Tokens you can call then secret keys, first is “Personal access tokens” second is “Firebase Token”

To get Personal access token your git profile >settings> Developer settings> Personal Access Token> Generate new token > select only ‘repo’ scope and give a good name that’s it.

copy the key and go to Project > Settings > Secrets > New Secret > Enter “TOKEN” for (YOUR_SECRET_NAME) and value will be key.

For getting Firebase Token run this command in the terminal in the project directory

$ firebase login:ci

then it will open a browser window to login select the gmail account by which you have firebase account which contains this hosting.

once done it will show your key

copy the key and go to Project > Settings > Secrets > New Secret > Enter “FIREBASE_TOKEN” for (YOUR_SECRET_NAME) and value will be key.

- name: deploy
  uses: peaceiris/actions-gh-pages@v3
  with:
    github_token: ${{ secrets.TOKEN }}
    publish_dir: ./build/web
- name: Deploy to Firebase Hosting
  uses: w9jds/firebase-action@master
  with:
    args: deploy --only hosting
  env:
    FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

here is the full code

If you have any question feedback you can let me know in the comments below.

More Article You May Like :

Build More Apps:

  1. Recipe App with Flutter
  2. Flutter News App with NewsApi Org
  3. Fully Functioning Flutter Chat App with Firebase

Written by
Sanskar Tiwari
Join the discussion

Instagram

Invalid OAuth access token.