Setting up Firebase in React

Aug 02, 20192mins read

Project Setup

We'll start by creating a react app using CRA. To do that open up your terminal and start by executing this command to install the react app.

npx create-react-app react-firebase
cd react-firebase

Next we'll install firebase to do that run this command within the same folder.

npm install firebase

This is all we need for now to get started with setting up firebase with react.

Creating a project in firebase

Head over to firebase console. Click on the add project card.

Firebase Console

It's a three step procedure. First step would be to give your project a name, second step is to choose if you want to install Google Analytics or not but we won't be doing that so we can skip that for now. After skipping to install Google Analytics it'll create a new project for you and redirect you to the dashboard.

Firebase Console Dashboard

Add an app to your project

Now we'll add an app to our firebase project and to do that head over to the project settings by clicking on the gear icon on the top left.

Firebase Project Settings

Now from the 'Your apps' section select the web option, that's the one with angle brackets. On clicking it'll open up modal from where you can register your app. Start by giving your app a name and if you want you can also setup the Firebase hosting from here or later on at any time from the dashboard. For this tutorial we're not going to be using firebase hosting.

The next step in adding an app to your project is to copy the credentials that is needed to setup firebase SDK.

Add an app to your project

Adding Firebase SDK to React

Go into the src folder and create a new directory and give it a name config. Inside that folder create new file with the name firebase-config.js. Now we'll be importing a two packages into this config file.

// firebase-config.js
import firebase from 'firebase/app'
import 'firebase/firestore'

So we imported basically two things the firebase itself from the firebase/app and firestore from firebase/firestoe. Firestore is a real time database that we'll be using later on to store user's data as documents in the users collections.

Let's add the credentials we copied for the Firebase SDK.

// firebase-config.js
let config = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_DB_URL,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_ID,
messagingSenderId: process.env.REACT_APP_SENDER_ID,
appId: process.env.REACT_APP_APP_ID,
}
firebase.initializeApp(config)
const firestore = firebase.firestore()

You'll notice I used the environment variables, this is to avoid exposing the crucial data. So we'll create .env file in the root folder. CRA automatically handles the env files and serves the environment variables that'll be accessible from anywhere in our codebase.

// .env
REACT_APP_API_KEY=<YOUR API KEY>
REACT_APP_AUTH_DOMAIN=<YOUR AUTH DOMAIN URL>
REACT_APP_DB_URL=<YOUR DB URL>
REACT_APP_PROJECT_ID=<YOUR PROJECT ID>
REACT_APP_STORAGE_ID=<YOUR STORAGE ID>
REACT_APP_SENDER_ID=<YOUR SENDER ID>
REACT_APP_APP_ID=<YOUR APP ID>

We've initialized our app using firebase and passed our config object as an argument to it. We've also initialized firestore and we'll be using it to access methods that firebase provides.

// firebase-config.js
firebase.initializeApp(config)
const firestore = firebase.firestore()

Let's export the firebase and firestore so that we can used them anywhere in our codebase. Add the line below to the end of the firebase-config.js file.

// firebase-config.js
export { firebase, firestore }

That's all we need to add the Firebase SDK to our React app.

Code - Github