Deploy a Gatsby site to Firebase hosting... with the correct cache settings

February 28, 2020
Share post

In this tutorial, we'll deploy a static site generated with Gatsby to firebase hosting.

We'll also tune the firebase cache settings to match what the Gatsby docs recommend.

The official Gatsby docs now reflect the configuration in this post.

πŸŽ‰ I'm proud to say I submitted the PR that made this possible. https://github.com/gatsbyjs/gatsby/pull/21897 πŸŽ‰

This example focuses on deployment and hosting.

I am assuming you are already familiar with running, building and deploying a Gatsby static site.

πŸ€” Not familiar?

Then, go check the awesome Gatsby docs.

πŸ”΄ Live example

πŸ’» Sample Code

Check out the
example GitLab Repo
gitlab icon

The repository contains:

  • Some modifications to the gatsby-starter-default.
  • The firebase configuration needed to deploy the static site.
  • The firebase cache settings recommended by the Gatsby Docs.

Pre-requisites

Create a Gatsby site

Setup a new gatsby site by following the gatsby get started guide.

Make sure to generate the production assets by running

npx gatsby build

Signup for a Firebase account

Setup a firebase account by going to https://firebase.google.com/.

Initialize Firebase Hosting

Install the Firebase-CLI

Download from the Firebase CLI from the the official site. Follow the instructions on the site according to you OS.

Login into firebase

  1. Login to Firabase in your local development machine to be able to deploy.

    firebase login
  2. If you're getting a 401 error and you're already authenticated, try re-authenticating by running:

    firebase login --reauth

Initialize Firebase in your Gatsby dir

  1. From your Gatsby project dir:

    firebase init

When prompted, choose hosting, and then continue with the defaults.

Tune the Firebase cache settings

Update the firebase.json

  1. Replace the default firebase.json with the json below.
{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "headers": [
      {
        "source": "**/*",
        "headers": [
          {
            "key": "cache-control",
            "value": "cache-control: public, max-age=0, must-revalidate"
          }
        ]
      },
      {
        "source": "static/**",
        "headers": [
          {
            "key": "cache-control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      },
      {
        "source": "**/*.@(css|js)",
        "headers": [
          {
            "key": "cache-control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      },
      {
        "source": "sw.js",
        "headers": [
          {
            "key": "cache-control",
            "value": "cache-control: public, max-age=0, must-revalidate"
          }
        ]
      },
      {
        "source": "page-data/**",
        "headers": [
          {
            "key": "cache-control",
            "value": "cache-control: public, max-age=0, must-revalidate"
          }
        ]
      }
    ]
  }
}