Deploying to Firebase Hosting

Firebase Hosting is a free web content hosting platform for developers. With a single command, you can quickly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network).

Prerequisites

A Firebase Account
A Firebase Project created
A Gatsby project set up. (Need help creating one? Follow the Quick Start)

Deployment

Install the Firebase CLI with npm by running the following command:
shell
```
npm install -g firebase-tools
```
Sign in to Firebase using your Google account by running the following command:
shell
```
firebase login
```
You can test if the CLI is correctly installed by running firebase projects:list, which should show you a list of your Firebase Projects.
Navigate into your gatsby project directory and setup firebase:
shell
```
firebase init
```
This command will prompt you to:
- select the Firebase products 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 <kbd>enter</kbd>. It will default to public, which is also Gatsby's default public directory.

Update the firebase.json with the following cache settings

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

Prepare your site for deployment by running gatsby build. This generates a publishable version of your site in the public folder.
Deploy your site by running the following command:
shell
```
firebase deploy
```

All done! Once the deployment concludes, you can access your website using firebaseProjectId.firebaseapp.com or firebaseProjectId.web.app.

Check the Firebase Docs for information about how to customize your deployment further. Remember that each time you wish to redeploy your site, you will need to rerun gatsby build first.

<CloudCallout> For automatic setup of builds that are deployed straight to Firebase: </CloudCallout>

Limitations

Firebase doesn't support advanced features like SSR, DSG, or Image CDN. You can get all features and faster builds by signing up to Gatsby Cloud.

Prerequisites

Deployment

Limitations

Additional resources