What's Firebase Hosting?

From the Firebase Docs,

It's basically a platform provided by Google to host your SPA or ideally any static web apps. I've been using Firebase hosting since 2015. It's basically free, supports versioning so if you mess up a deployment, you can roll back to the previous version. And it also provisions SSL for free. I mean, this is a steal deal if you ask me.

Some prominent features are:¹

• SSL provisioned by default
• Host static and dynamic content plus serverless functions using Express.js
• Deploy everything with a single command
• Works with CI/CD systems

Before We begin

• You've already set up a Gatsby project on your local machine
• You have a Google Account
• You know your way around the terminal. (Duh!)

Installing Firebase

Firebase comes with an awesome CLI to install and configure firebase locally. This is like a cool thing Firebase does. The CLI comes with a ton of options, not only limited to hosting. But for the sake of this article, we will focus on the hosting part of the CLI.

To install Firebase CLI², you can follow the official documentation, or follow these simple steps:

• Install CLI tools:

npm install -g firebase-tools

• Login and test the CLI:

firebase login

🏗 Setup Project

Navigate into your Gatsby Project directory and initialize firebase

cd gatbsy-project
firebase init

This command will prompt you to:

• Select the Firebase features you wish to set up. Be sure to select Firebase Hosting.
• Select the Firebase Project you wish to use or create a new one, if you haven’t done it previously.

When prompted to select your public directory, press enter. It will default to public, which is also Gatsby’s default public directory.

Update the firebase.json file with the following content

{
  "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"
          }
        ]
      }
    ]
  }
}

🧪 Test Changes

If you want others to view changes to your web app before going live, you can use preview channels.

When you deploy to a preview channel, Firebase serves your web app at a "preview URL", which is a sharable, temporary URL.

From the project root run,

firebase hosting:channel:deploy CHANNEL_ID

Open your web app at the preview URL returned by the CLI. It will look something like this: **firebaseProjectId\*--\*CHANNEL_ID\*-\***RANDOM_HASH.web.app

Firebase Hosting supports a GitHub Action that automatically creates and updates a preview URL when you commit changes to a pull request. Learn how to set up and use this GitHub Action.

🚀 Go Live

Prepare a build of your site by running gatsby build. This will generate static files and put it in public folder. We want to deploy this folder to Firebase, by running:

firebase deploy --only-hosting

All done! Your site should now be live at firebaseProjectId.firebaseapp.com or firebaseProjectId.web.app. If you've configured a custom domain for your project, you can visit that to test your site.

You can also promote/clone your site from a preview channel to a live channel by running

firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

Replace each placeholder with the following:

• SOURCE_SITE_ID and TARGET_SITE_ID: These are the IDs of the Hosting sites that contain the channels.
• SOURCE_CHANNEL_ID: This is the identifier for the channel that is currently serving the version you want to deploy to your live channel.
  • For a live channel, use live as the channel ID.

We are live with free hosting, free SSL, and backed by Google Infrastructure, so you can trust your site to remain up in case of Hacker News hug of death. You can also connect a custom domain, which will get all the benefits.³

And that's it for this episode of The Build Series. Feel free to reach out on socials in case of any issues or complaints.

Until next time! ✌🏽