DEV Community

Discussion on: Build a React & Firebase Blog Site: Part 1

Collapse
 
ashleemboyer profile image
Ashlee (she/her)

I found the GitHub repo for the Gatsby plugin I was looking for. I have only done brief testing, but I'm pretty sure it'd accomplish SEO needs! Might play around with this a little more another time.

GitHub logo ryanflorence / gatsby-source-firebase

Gatsby plugin to turn Firebase into a Gatsby data source.

Gatsby Firebase Source

Quick and dirty firebase source for Gatsby. Allows you to query your firebase data right into your statically generated pages with Gatsby.

screenshot

Usage

  1. First you need a Private Key from firebase for privileged environments, find out how to get it here: firebase.google.com/docs/admin/setup (or click the settings gear > Service accounts tab > Generate New Private Key button at the bottom)

  2. Place that private key .json file somewhere in your gatsby project (the root is fine).

  3. Configure gatsby-config.js

// the plugin options are:
{
  credential
  databaseURL
  types: [{
    type
    path
    query,
    map
  }]
}

// Here's an example:

module.exports = {
  // the rest of your config
  plugins: [
    {
      resolve: `gatsby-source-firebase`,
      options: {
        // point to the firebase private key downloaded
        credential: require("./firebase-key.json"),

        // your firebase database root url
        databaseURL: "