How to Set up automatic builds and deploys with GitHub on an existing frontend APP on firebase hosting.

A wordy heading. Yes i know. But we must recognize that this makes it specific to our situation.

So in my last article we talk about How to deploy your frontend APP on firebase hosting..

Now let see how we can set up automatic build and deploy with github.

1- Set up the GitHub Action to deploy to Firebase Hosting

1.1- Github Repo

Fork this repo

git clone https://github.com/hermannleboss/vue-typescript.git

Then checkout branch feature/github

I assume you have already followed the step to enable Firebase hosting on this repository. If not follow this :How to deploy your frontend APP on firebase hosting..

Or you can just create a GitHub repository (public or private) or use an existing one. You must have admin permissions for the repository.

1.2- Set up the GitHub Action part of Hosting

Now let dig deeper.

If you've NOT set up Hosting, run this version of the command from the root of your local directory:

firebase init hosting

If you've ALREADY set up Hosting, then you just need to set up the GitHub Action part of Hosting. Run this version of the command from the root of your local directory:

firebase init hosting:github

Follow the CLI prompts, and the command will automatically take care of setting up the GitHub Action:

• Creates a service account in your Firebase project with permission to deploy to Firebase Hosting.

• Encrypts that service account's JSON key and uploads it to the specified GitHub repository as a GitHub secret.

• Writes GitHub workflow yaml configuration files that reference the newly created secret. These files configure the GitHub Action to deploy to Firebase Hosting.

Setup the repo with the format user/repository : here hermannleboss/vue-typescript

You will have two files inside .github/workflows/

#.github/workflows/firebase-hosting-merge.yml
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm install && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_XXXX }}'
          channelId: live
          projectId: xxxxxx

Make sure you have line 14

- run: npm install && npm run build

Now commit your update then push it.
Now you can create your branch add your commits the create a Pull Request

PS: If you some build error on deploy check that your workflow can edit your repository.

Set it to read and write