Adding Firebase Analytics and Firestore to a React Next.JS app
I’ll keep this post short and sharp. It took me way too long to work out how to integrate Firebase into my React/Next.js webapp so I’m writing this note to spare future developers the pain (the dev docs helped but still had large holes).
I was doing this for my website (please check it out and consider sharing the game if you like this article… https://wideawakepip.com/ — teaser video below…). React was definitely overkill but I was trying to learn a few new skills… and I definitely did.
Step 1: Starting Assumptions
I’m assuming you’ve got your react app installed and you’ve selected Next.js as the framework for it (eg, like me, you’ve decided the Create React App hasn’t got the chops because you need Server Side Rendering etc…).
If you haven’t — go here and follow the instructions: https://nextjs.org/learn/basics/create-nextjs-app
Step 2: Installing Firebase
Go to the Firebase homepage and sign in or sign up. Follow the steps they give you. At the time of writing (July 2020) these were broadly:
1. Give your project a name
2. Include google analytics and select an account
3. Click — Create project
…. and you’re done — that’s the easy bit.
Step 3: Getting Firebase and Next.js to play nicely 😱
This is when I ran into a brick wall. Firebase was showing me some code and asking me to put in into the app before the closing <body> tag…. what closing body tag!!! Next.js does a pretty good job of hiding this from you and why do I need <script> tags if all my code is in JavaScript (or JSX at least). So I began the long process of trial and error… 😱😰😱😰😱😰😱😰😱😰
Mini step 3.1: Get the correct config code from Firebase
In firebase you should be able to find a config snippet that looks like this….
Things to note:
- select the config tag (not the CDN tag)
- ensure there is a measurement ID (this is required for Analytics to work).
Mini step 3.2: Create a firebase.js file in your app
Pick a sensible location in your app (ie, not in your pages folder but in a components folder or src folder if you have one).
Create ‘new file’ and give it the name ‘firebase.js’.
And paste in your config code.
Mini step 3.3: Import Firebase into Firebase.JS AND DON’T FORGET ANALYTICS!!!!!
As you can tell from the highlight — this is where I fell over — it’s not at all obvious that Analytics needs a separate import…. at least not to me. So add two more lines at the top of the file…
import firebase from ‘firebase’;
import ‘firebase/analytics’;
So you get this:
Mini step 3.4: Initialise Firebase like Google tell you BUT NOT AT ALL LIKE GOOGLE TELL YOU
Yeah — this got me pretty stuck for a while . Firebase want you to add this line
firebase.initializeApp(firebaseConfig)
and actually this one as well if you want analytics to work.
firebase.analytics()
Simple! But this will break your app when building. You get lots of errors saying ‘window is undefined’ etc… I guess this is because Analytics needs something to hook onto and when it’s getting built for server side stuff the window doesn’t exist…
So after looking around I eventually found this idea buried deep in a github repo. It basically says..
Don’t run unless a window object is available (oh and an extra check to make sure you’ve got the measurementID for analytics I mentioned earlier).
and finally you’re good to add the export:
export default firebase
so the whole file looks like this:
Mini step 3.5: Great! But where do you call this from?
Calling the database as-and-when you need it is great, so you could do this in a component but you kinda want Analytics to be global. So slightly confusingly I ended up adding an ‘import firebase’ call in my _app.js file without using it anywhere. The _app.js file is the root of the app so should get run for every page a user might visit. BETTER SUGGESTIONS WELCOME — I think this isn’t a great solution but it works…
Mini step 3.6: Add extra fun with data storage calls and custom events!
Once you’ve got it connected then the world is your oyster. You can use the following to add data to your Firestore (here I’m creating an object with today’s date and adding in an email value and storing it to my collection, surprisingly called ‘emails’):
and you can add custom events to analytics with something like this:
Step 4: Oh yeah and don’t forget to actually install Firebase into your app!
Jump into your terminal, navigate to your project folder and run a good ol’ npm install.
Step 5: Jump into Firebase analytics and check its working
You can do this via your Firebase console or your synced-up Google analytics account. Hopefully you’ll see at least one active user looking at your site!
Happy coding!!!
