Automatically Deploying a Gatsby Site to Firebase with GitHub Actions (CI/CD)

We are currently in the process of overhauling our website and looking forward to its release in the coming weeks. The project has been 9 months in the making and has become an internal running joke for all the distractions along the way. It’s notoriously hard for companies to separate time for internal own projects like this - and is customary for them to be worked on sporadically.

Building on the success we have had with Gatsby + Firebase Hosting, we are exploring a new Jamstack delivery pipeline. Having previously used Gatsby with Google Cloud Build , we want to remove a link out of the chain and keep the code build actions within the GitHub Repository itself.

Prerequisites

• Gatsby Project (Follow the Quick Start Guide)
• A project in GitHub
• A Firebase Project and Account

Deploying to Firebase Hosting:

The below can be used to manually deploy the site from your local machine, the setup does do a lot of the configuration for you which is needed for GitHub actions to work. We would recommend creating a new branch for all the below changes and then opening a pull request to initiate the GitHub action.

Install the Firebase CLI by running the following command npm install -g firebase-tools

Authenticate Firebase using your Google account by running the following command: firebase login

This will open the browser window for you to login, once complete close this and head back to your terminal.

Initialize your Gatsby Firebase project in the project directory root by running the following command:

firebase init

Prepare your site for deployment by running gatsby build. This generates a publishable version of your site in the public folder. Deploy your site by running the following command: firebase deploy

Setting up GitHub Actions for Firebase Hosting:

All the config for how to build and deploy our Gatsby site will live in the ci-production.yaml file in your Git repo.

The essence of it is:

Use a virtual machine with Yarn & Node installed Install all project dependencies from the package. json Install Firebase-cli (normally installed globally on a local machine) Run the Gatsby build function and generate the static site to /public Push the contents of the public folder to Firebase Hosting using the token FIREBASE_TOKEN secret

Creating the deployment workflow

From your repository on GitHub, create a new file in the .github/workflows directory named ci-production.yaml.

Copy the following YAML contents into the ci-production.yaml file

name: '[production] Build and Deploy'
on:
  push:
    branches:
      - master # branch to use as a trigger

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Install Dependencies
        run: yarn install
      - name: Build
        run: yarn gatsby build
        env:
          GATSBY_ACTIVE_ENV: production
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: public
          path: public
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: public
          path: public
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting --project default
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

The above code will run the GitHub action on every push to master.

Authorising Firebase CLI

You’ll notice from the YAML file that there is secrets.FIREBASE_TOKEN in the Firebase deploy command. FIREBASE_TOKEN is a GitHub Encrypted Secret that when the action runs the secret value will be substituted in. We will use this to pass the firebase authorization token so that the site can be deployed.

To retrieve your Firebase access token on your local machine and within the project directory run the following command, this allows firebase to work with continuous integration systems and will return a token to be saved in the trigger settings.

firebase login:ci

Once you have the token, navigate to your GitHub repo and look for the Settings tab. Create the new secret with the key FIREBASE_TOKEN and the value from the firebase login:ci command.

Testing deployment

The last setup is to open and merge the new pull request on to master which will cause the new GitHub action to run. You can see the status of the build under the Actions tab.

All done! Once the deployment concludes, you can access your website using .firebaseapp.com or .web.app.