DevOps-ify your Firebase app using Github Actions 😎

One of the best ways to increase the productivity of a software developer is to automate any manual or repetitive task. In this article, I will show how easy it is to automate the build, test, and deployment of a firebase app using Github Actions.

What is Firebase?

Firebase is a Backend as a service (BaaS) platform developed and maintained by Google. It helps developers to develop scalable applications faster.

What is Github Actions?

Github Actions is a platform provided by GitHub to automate the development workflow. It is free for any public repository and has a very generous free tier for the private one.

What is DevOps?

Although DevOps is a very vast topic itself but will try to define it in few words. So DevOps is kind of a development philosophy that consists of a set of practices that combines software development and IT operations (Development + Operations ~ DevOps). It aims to reduce the software development lifecycle by automating most of the repetitive tasks.

One of the parts of DevOps is CI/CD i,e, Continuous Integration, and either Continuous Delivery or Continuous Deployment. I will walk you through, how to create a CI/CD pipeline for a firebase project.

Prerequisites

• A Firebase project was already created and Firebase hosting was enabled. If not, then refer to this guide:
  https://soumitdas.hashnode.dev/how-to-deploy-a-react-application-using-firebase-hosting

In this demo, I will continue with the above project and implement CI/CD pipeline for its deployment workflow.

Start with GitHub Actions

Every action needs a .yml file in the .github/workflows directory to run. This .yml file is used to describe actions, behavior, and everything else.

.github/
    workflows/
      - action1.yml
      - action2.yml
      - ................
      - ................

Each action can have one or multiple jobs to run.

Create a Firebase Service Account

Firebase projects are part of Google Cloud Platform (GCP) projects. For the Github Actions to run our workflow, we have to create a service account with the necessary permissions. Follow this guide to create a service account and download the key in JSON format.

Add Service Account key as GitHub secrets

Hardcoding the secret key in the action is not a good idea so instead, we will save it as a repository secret in GitHub and access it in the .yml file.

Open GitHub Repo -> Click Settings tab -> Secrets -> New repository secret

Then enter the secret name FIREBASE_SERVICE_ACCOUNT and paste the JSON key as the value.

Implement Continuous Integration (CI)

Generally, multiple developers work on a project collaboratively. Thus it is required to manage the code integration seamlessly. Here Continuous Integration comes to the rescue. On every pull request (PR) to the main branch, we will run a workflow (test, build and preview) to manage the integration efficiently.

Add a deploy-preview.yml file in the .github/workflows directory.

# deploy-preview.yml
name: Deploy to Preview Channel

on:
  pull_request:
    branches:
      - main

jobs:
  test_and_build:
    name: Build and Test React App
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v2
      - name: Install Dependencies
        run: npm install
        # Run the test and build steps below
      - name: Run Tests
        run: npm test
      - name: Build
        run: npm run build
        # Save the build as an Artifact
      - name: Archive Build Artifact
        uses: actions/upload-artifact@v2
        with:
          name: build
          path: build

  deploy_preview:
    name: Deploy React App
    needs: test_and_build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v2.3.2
      - name: Download Artifact
        uses: actions/download-artifact@v2
        with:
          name: build
          path: build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
          expires: 30d

Implement Continuous Deployment (CD)

On every push (directly or PR merge) to the main branch, we will run the CD workflow.

Add a deploy-live.yml file in the .github/workflows directory.

# deploy-live.yml
name: Deploy to Live Channel

on:
  push:
    branches:
      - main

jobs:
  test_and_build:
    name: Build and Test React App
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v2
      - name: Install Dependencies
        run: npm install
        # Run the test and build steps below
      - name: Run Tests
        run: npm test
      - name: Build
        run: npm run build
      - name: Archive Build Artifact
        uses: actions/upload-artifact@v2
        with:
          name: build
          path: build

  deploy:
    name: Deploy React App
    needs: test_and_build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v2.3.2
      - name: Download Artifact
        uses: actions/download-artifact@v2
        with:
          name: build
          path: build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          channelId: live

Now commit the changes and push them to the main branch which will initiate the first CD workflow.

Congratulations 🎊, you have implemented a CI/CD pipeline in your Firebase project.

You can find the full source code of this demo here

Wrap up

Now, most of the repetitive workflow has been automated, so you can focus more on writing good and efficient code.

Hope this article was helpful 😊. If so, then hit the like and share it with others.

What to add something? write it in the comments 👇