CI/CD to Firebase hosting and GITHUB actions

This is a simple step by step tutorial to deploy to firebase using GITHUB actions.

GITHUB CI/CD

1.Create a firebase project:go to console.firebase.com -> go to console on top right -> Add Project.

2. Provide a name.

3. Add GA if required and select a firebase account. Then click on create project.

4. You’ll see this screen once done.

5. Click on -> setting -> then-> project settings.

6. Select </> icon from the below image.

7. Give a name to your app

give a name and click on register. Checkbox: you can setup hosting later.

8. Once done, You’ll see a screen like below.

Copy the config and save it in your firebase.json of your project.

9. This is the folder structure of my react project.

firebase.json

# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the action will run.
on:
  # Triggers the workflow on push or pull request events but only for the master branch
  push:
    branches: [testbed]
  #   pull_request:
  #     branches: [ master ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2

      - name: Build
        run: |
          cp .env-testbed .env.production
          echo "copying"
          yarn
          echo "yarned"
          CI='' yarn run build
          echo "yarn build done"
          # cd functions
          # cp .env-testbed .env
          # echo "RAZORPAY_TEST_SECRET_KEY=${{ secrets.RAZORPAY_TEST_SECRET_KEY }}" >> .env
          # cat .env
          # echo "copying env in functions"
          # npm install
          # echo "install inside functions"
      # Runs a set of commands using the runners shell
      - name: Firebase Deploy
        run: |
          sudo npm install -g firebase-tools
          firebase use test-cicd-tutorial --token ${{ secrets.FIREBASE_TOKEN_TESTBED }}
          firebase deploy --only hosting,database,storage,firestore --token ${{ secrets.FIREBASE_TOKEN_TESTBED }}

Above script does two things, one to deploy functions and another to deploy front-end/react code to firebase.

open a command prompt.terminal in your local

firebase login

this let’s you login to firebase.

firebase login:ci

this will print the token. Put this token in secrets and refer it in CI, always a better practise that to hard-code.

In the CI script I shared above, whenever I merge code testbed branch, it will run the CI script and deploy code to the firebase.

Bingo! You’ve written your first CI script. Give me a clap if you’ve found it useful. Please share your thoughts in the comments below. Till next article, BBYE!