I have seen a load of articles on hosting Gatsby on Netlify but none for Firebase & Google Cloud Platform so decided to do a write up on it. In the following configuration its free to hosting too so great for any starter projects.

I run the development team at Crowdform, a digital product studio in London, and we have been busy building our lastest client websites in Gatsby.

As an agency we have chosen ReactJS and GraphQL in our larger digital products so seemed natural to make the move to Gatsby too for consistency. Gatsby can be used to build static websites that are Progressive Web Apps, they follow the latest web standards, and are optimised to be highly performant so score well on Google Lighthouse. We do still use Wordpress but now in a headless configuration.

Prerequisites

1. Gatsby Project (Follow the Quick Start Guide)
2. Project in GitHub, Bitbucket or Google Cloud Source Repository
3. Google Cloud Account with billing enabled (you will not be charged as the limits on Cloud Build are generous and Firebase Hosting is free. Cloud Build gives you the first 120 builds-minutes per day free)
4. Google Firebase Project & Google Cloud Build API enabled

Setting Up Cloud Build

1. Add a build trigger
2. Link a Git Repo

Full Google Cloud Build Instructions

Cloudbuild.yaml Config

Create a file cloudbuild.yaml in the root of your project and copy across the below Gist into the YAML file.

steps:
  - name: node:10.15.1
    entrypoint: yarn
    args: ["install"]
  - name: node:10.15.1
    entrypoint: yarn
    args: ["add", "firebase-tools"]
  - name: node:10.15.1
    entrypoint: yarn
    args: ["build"]
  - name: "node:10.15.1"
    entrypoint: "./node_modules/.bin/firebase"
    args: ["deploy", "--project", "$PROJECT_ID", "--token", "$_TOKEN"]

1. Use a Yarn & Node virtual machine
2. Install all dependencies
3. Install Firebase-cli (normally installed global on a local machine)
4. Run the Gatsby build function and generate the static site to /public
5. Push the contents of the public folder to Firebase Hosting.

Authorising Firebase

firebase login:ci

In CloudBuild under the “Substitution variables” add the key value.

_TOKEN: {token from firebase login:ci}

Now Run the build Trigger

For a full step by step guide see our article on deploying a gatsby site to Firebase with Cloud Build.