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...
For further actions, you may consider blocking this person and/or reporting abuse
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
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.
From my understanding if you are fetching for the content on the client the web crawler won’t parse and index that part.
you can use next.js to do it!
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
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..
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!
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!
I'll definitely use in my future projects. Thanks!
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
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.
Hey developer it didn't resolved my error.can you tell some other solution.
did u mean uninstall npm ?
I’m typing from my phone and it didn’t like “npm”. Corrected! 😅
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!
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! 😌
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
Nice 👌
Great post
Thank you! I’m glad you enjoyed it. Stay tuned for the next one later today! 🤩
I love it ✌😉
Hi dev, I got this error: attempted import error : getFirebase is not exported from ..firebase
Have tried every possible solutions but not working
Hey Ashlee,
This is an amazing series. Would you like to submit this series on Google's Dev Library too? devlibrary.withgoogle.com/