Firebase Hosting with GitHub Actions

Recently Firebase has launched a brand-new GitHub Action. With this you can preview your site on every Pull Request. This Preview channel will be updated once PR is created or updated. Every PR will get its own preview channel, so you can focus on each PR's changes. Also we can configure Github Action to deploy the site to live version once PR is merged.

I have configured this for one of my GitHub repository.

1. Go to your GitHub repository and click on "Actions" tab.
2. Click on "set up a workflow yourself"
3. Give name to your file. Here I am naming my file as "deploy-preview.yml"
4. Add below code in the yml file

name: Deploy to preview channel

# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the main branch
on:
  pull_request:

jobs:
  build_and_preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      # Add any build steps here.
      - run: npm i && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
          expires: 7d
          projectId: your-project-id
        env:
          FIREBASE_CLI_PREVIEWS: hostingchannels

Ok. So let's take a step back and understand what we have done here.

• First we have added on condition pull_request so that this action will trigger on every Pull Request
• We have added - run: npm i && npm run build to download all the npm packages and create a build to deploy on production.
• repoToken You don't need to set this secret yourself - GitHub sets it automatically.
• projectId The Firebase project that contains the Hosting site to which you want to deploy. If left blank, you need to check in a .firebaserc file so that the Firebase CLI knows which Firebase project to use.
• firebaseServiceAccount Now this is required and you can find the same in your project settings. Go to https://console.firebase.google.com/u/1/project/{project-name}/settings/serviceaccounts/adminsdk and click on Generate new private key. Save the json file and add it in GitHub secrets.

1. For that, go to settings tab of your repository and select secrets from the left menu.
   

2. Click on New Secret. Give the Name as FIREBASE_SERVICE_ACCOUNT and in value field, paste the JSON copied in the Firebase project. Click on save.
   

Now you are ready to commit your new GitHub action file to your repository. From the right hand side, Click on "Start commit" and give commit message. Also, select option of create a new branch for this commit and start a pull request.

Once you raise a Pull Request, you can see the GitHub action in Action. Once the Action is completed, you will see the preview URL present on your PR. Super Cool...!!!! You can also decide the expiry of this Preview Channel by specifying it in your .yml file you created earlier. expires:

If you want to deploy your site to the live version on successful merge. You can add one more GitHub Action, For example let's call it as "deploy_live.yml". Add below content in your file

name: Deploy to Live Channel

on:
  push:
    branches:
      - main

jobs:
  build_and_preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      # Add any build steps here. For example:
      - run: npm i && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
          projectId: your-project-id
          channelId: live

Here we are specifying,

on:
  push:
    branches:
      - main

So that this action will only trigger when PR is merged in main branch.

And Here we go....!!! We have completely automated deployment of our site.

Reference: https://github.com/marketplace/actions/deploy-to-firebase-hosting
https://github.com/pprachit09/coderlust-resume/tree/main/.github/workflows

Feel free to share your thoughts...!!! Happy Learning.