Gatsby Cloud Docs

Getting started with Gatsby Cloud and Firebase

Table of Contents

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.

Creating your Gatsby Site

You can set up Gatsby Cloud to autoprovision a new Gatsby site. Alternatively, you can add an existing site to Gatsby Cloud by selecting that GitHub repository during set up.

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.

The Gatsby Newsletter

Keep up with the latest things Gatsby!
Loading...

Product

Why Gatsby?How It WorksIntegrationsDocumentationPricingStatus

How It Works

Bring Data From AnywhereWrite Modern AppsUnreal PerformanceOne-Click DeploymentAll Guides
Terms of UsePrivacy Policy
© 2020 Gatsby, Inc.