DEV Community

Build a React & Firebase Blog Site: Part 1

Ashlee (she/her) on August 27, 2019

This post was originally published on my personal blog site. Welcome! This is the first in a series of posts that will teach you how to build a bl...

Read full post

Gabriel Moncha • Aug 27 '19

I was thinking also about this in order to reduce costs, but left it float around some time until I decided it’s not SEO worthy

Ashlee (she/her) • Aug 27 '19

Hey, Gabriel! Thanks for your comment. Could you talk a little bit more about your thoughts on SEO? I’m not sure I fully understand what you mean.

Gabriel Moncha • Aug 27 '19 • Edited

From my understanding if you are fetching for the content on the client the web crawler won’t parse and index that part.

Lucas Trevisan • Aug 27 '19

you can use next.js to do it!

Gabriel Moncha • Aug 27 '19 • Edited

Yes. But then the purpose of reduced costs is not accomplished.
I have a small Romanian NGO, and the change we drive isn’t employed by online content. So there was no reason to invest in this strategy.
Keeping things simple and mostly free is one of my main objective.
I chose React-Static with Contentful. Not sure if it’s the right decision regarding SEO, but it was the most intuitive to make

Lucas Trevisan • Aug 27 '19

nowadays google and other search engines can index pages with dynamic content. I think it's not a big deal for you! But, if you really want strong SEO you'll need to switch to next, gatsby..

Ashlee (she/her) • Aug 27 '19

I definitely second Gatsby here! And there is also a plugin you can use that will pull data from Firebase and then make it available through GraphQL. I’ll try to look it up today and link here!

Aaron • Aug 27 '19

Great Article Ashlee! I have done a bit of work with firebase over the years and would have to say this article is one of the easiest to follow that I have seen!

Re SEO, I haven't used it but have heard a lot of good things about react-snap (github.com/stereobooster/react-snap) which allows you to make your create-react-app SEO friendly, which might be worth some people checking out!

Lucas Trevisan • Aug 27 '19

I'll definitely use in my future projects. Thanks!

sayujraghav • Aug 30 '19

I am getting this error

./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Error: Cannot find module '@csstools/normalize.css'

after 3rd step and running npm run start

Ashlee (she/her) • Aug 30 '19 • Edited

Did you run “npm install” first? That’s something I was missing in the first version of the post but it has since been updated.

rahulj3716 • Sep 21 '19

Hey developer it didn't resolved my error.can you tell some other solution.

sayujraghav • Aug 30 '19

did u mean uninstall npm ?

Ashlee (she/her) • Aug 30 '19

I’m typing from my phone and it didn’t like “npm”. Corrected! 😅

Marcelo Gonçalves • Aug 27 '19

Hi, @ashleemboyer ! Nice the way you make things so simple. I've seen many bloated solutions around.

Just one question: why did you choose real-time database instead of Cloud Firestore? I ask this cause I was giving a first look at this stack yesterday and documentation says Firestore is the preferred choice.

Thanks for the post, looking forward for the next parts of the series!

Ashlee (she/her) • Aug 27 '19

Hey, Marcelo! Thank you for your question. The answer is that I’ve always used the Real-time Database in my projects with Firebase. I have multiple years of experience with it and am used to it. I’d love to take a deeper dive into the Firestore implementation one of these days! 😌

Ashlee (she/her) • Aug 27 '19

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.

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.

Usage

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)
Place that private key .json file somewhere in your gatsby project (the root is fine).
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: "

…