Deploying to Firebase

Gatsby Cloud is a performant platform for building your Gatsby site. Even better, it integrates with Content Delivery Networks (CDNs) like Firebase so you can build and deploy your site seamlessly.

Prerequisites

This guide assumes you already:

• have a Firebase account
• have a Gatsby Cloud site created

You can use either of the following site creation options if you don't have one already:

• Create a Site from a Template
• Create a Site from a Repository

Setting Up a Hosting Integration

Once your site is available inside Gatsby Cloud you can “view details” and navigate to the “Site Settings” tab.

Inside Site Settings there is an “Integrations” link. Select this menu item and scroll down to the section titled “Hosting Integrations”.

This is where you’ll see the Firebase logo. Click the “Connect” button to the right of that logo and you’ll be prompted to login into your Firebase account. If you don’t have one, you can create one at this time.

Once you’re authenticated with Firebase you’ll be prompted to authorize Gatsby Cloud to interact with Firebase on your behalf. After you’ve completed this step, you’re ready to configure deployment in Gatsby Cloud.

Connect with a Firebase project

If you don’t already have one, create a Firebase project in your Firebase console.

On the “Firebase Integration” screen choose a Firebase project for deployment from the dropdown.

Note that you can enter a Firebase site name for projects with multiple sites.

Configuration with Firebase

Firebase allows you to configure customized hosting behavior such as redirects, headers, cache settings and which files to deploy. You can define these behaviors in a firebase.json file. See Deploying to Firebase for the Gatsby recommended caching settings.

In order for Gatsby Cloud to use these settings for your Firebase hosting, you’ll need to make sure that your firebase.json file ends up in your public/ directory when your build is complete.

One way you can accomplish this is by adding the following code to your gatsby-node.js file:

const fs = require("fs");
exports.onPostBuild = () = {
  fs.copyFile(`./firebase.json`, `./public/firebase.json`, (err) = {
    if (err) {
      throw err;
    }
  });
};

Please see the Firebase Hosting Configuration documentation for more deployment customization options.

Finishing Up

And that’s it! Your site is now set up to build and deploy. Gatsby Cloud will handle everything for you. However, if you want to make a change to your domain you’ll want to do that directly on the Firebase dashboard.

Note that you can only have one hosting integration. If you choose to configure another provider, that will override your existing Firebase integration.