Firebase

Firebase, now part of Google, is a developer-oriented hosting platform that, like Heroku, offers a CLI for developers who wish to perform infrastructure operations through the terminal. Firebase enables deployment of both dynamic web applications and static sites to a global CDN. Before getting started with this service, users wishing to deploy Gatsby sites need to have a Firebase account and a Firebase project in that account.

To deploy your Gatsby site as a Firebase project, install the Firebase CLI by executing the following command:

$ npm install -g firebase-tools

Firebase allows you to use the command line to authenticate into your account and to list the available Firebase projects:

$ firebase login
$ firebase projects:list

Change directories into your Gatsby project root, if you aren’t in that folder already, and initialize a new Firebase project:

$ firebase init

The Firebase CLI will then walk you through a process to select the Firebase services to install and to identify a Firebase project in your account to associate with the Gatsby site. It’s recommended to choose the Firebase Hosting option. The Firebase CLI will also prompt you to identify a public directory, which defaults to public, the same as Gatsby’s own default.

Like Heroku, Firebase creates a manifest file (firebase.json) you should edit to provide cache configuration. The Gatsby documentation recommends this approach to Firebase manifests unless you have more advanced caching requirements:

// firebase.json
{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "headers": [
      {
        "source": "**/*",
        "headers": [
          {
            "key": "cache-control",
            "value": "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": "public, max-age=0, must-revalidate"
          }
        ]
    },
    {
        "source": "page-data/**",
        "headers": [
          {
            "key": "cache-control",
            "value": "public, max-age=0, must-revalidate"
          }
        ]
      }
    ]
  }
}

Upon saving this manifest, you can perform a Gatsby build to generate the contents of the public directory:

$ gatsby build

Then, deploy your site to Firebase by executing the following command, after which your website will be available from a domain ending in *.firebaseapp.com or *.web.app:

$ firebase deploy

Each time you update your Gatsby site, be sure to rebuild your site and redeploy.

NOTE

For more information about hosting Gatsby on Firebase, consult the Firebase documentation, the Firebase CLI reference, Firebase’s quickstart guide, and Firebase’s guide to using custom domains.