Finding the right CMS for your Gatsby site can be a challenge. One of the advantages of using something like Flamelink a Firebase CMS is that it uses Firebase under the hood, which gives access to a lot of cool features like cloud functions and web-sockets.

This tutorial will walk through the initial steps of setting up a simple Gatsby site

First things first, let’s get the Gatsby site up and running. This is my recommended starter when dealing with a Gatsby site https://github.com/gatsbyjs/gatsby-starter-blog

Please ensure that you have the Gatsby cli installed first:

npm install -g gatsby-cli

Now lets install the starter



cd my-blog-starter/

gatsby develop gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog cd my-blog-starter/gatsby develop

Cool now lets head over to https://console.firebase.google.com

Add a project and give it a name

Next, create a free account with Flamelink https://app.flamelink.io/login

Click add project

Next follow the instructions to integrate Firebase with Flamelink:

Go to project settings and register a new “web app”

Copy the code that it shows and paste it in the “Application code” field on the Flamelink set up screen

Go into the Firebase database, set up a new Realtime Database, and paste in the rules from the Flamelink setup

Add the database rules

Go to the Firebase storage and set up a new storage and paste in the provided code

Add the storage bucket rules

Same thing with authentication

Enable email authentication

Great, now we can set up the Flamelink source plugin and start pulling some data

Go back to your project and run the following command

npm i --save gatsby-source-flamelink

Now lets put the generic gatsby-source-flamelink configuration into the gatsby-config.js file (Be sure to fill in the fields)

Create a .env file in your root to save your Firebase Private Key and Firebase Token(We will need the token later for deployment) and add this code to the top of your gatsby-config.js

require('dotenv').config({ path: '.env.local' })

const parseNewLines = function(key) {

return typeof key === 'string' ? key.replace(/\

/g, '

') : key

}

const privateKey = parseNewLines(process.env.FIREBASE_CONFIG_PK)

And we also need to change our build scripts to setup node correctly

And install a few dev dependancy tools for this to work

npm i -D cross-env dotenv firebase-tools

Great! All working! Lets create and pull some data!

Create a post schema in the Flamelink admin panel

Add a title field to the post schema

Create a new post in the content tab

Lets first check that this is pulling through to Firebase, go to the database tab in the Firebase admin screen and check out Websockets in action!

Finally restart your Gatsby development build and head to

And add in the following query (Please note this query is dependant on the what you named your schema, with GraphQL you can view all possible queries anyway!)

{

allFlamelinkPostContent {

edges {

node {

title

}

}

}

}

That should also work, ok now lets add the query to our site, go to src/pages/index.js and add in the query to the existing pageQuery

Put the data in the HTML…

<h1>{data.allFlamelinkPostContent.edges[0].node.title}</h1>

And there we go…