Setting up Firebase for your React app
In this blog, you will learn what is Firebase & how to quickly set up Firebase i.e. setting up Firestore Database & Firebase Hosting for your React app.
What is Firebase?
Firebase is a backend service solution provided by Google. Firebase has become quite popular in the developer’s community because of the tools and services it has been providing. Firebase frees developers from the hassle of writing APIs and managing servers. Firebase does everything for us, right from creating our APIs for us to managing our data store.
Firebase comes with a plethora of inbuilt features, such as:
- Firebase Authentication
- Cloud Firestore
- Realtime Database
- Storage
- Hosting
- Cloud Functions
- Machine Learning
So let’s start!
1: Creating our Project on Firebase.
Go to https://firebase.google.com/ & login using your Google account. Click on ‘Go to console’. The console view which you will see will be similar to this:
Now, we will have to create a new project, which we will later attach to our React app. We will do that by clicking on the ‘Add Project’ option on the screen. A screen similar to this will appear:
Enter the project name of your choice & click on ‘Continue’. A new screen will appear asking us if we want to add Google Analytics to our project, it’s up to you if you want to enable it or not. Click on ‘Continue’ to continue with our project.
If you had enabled Google Analytics for your project you will see a page similar to the page below on which you will be asked to select an account to configure the project analytics. Select the account you want to configure your Google Analytics to & then click on ‘Create Project’.
Firebase will take some time to set up your project. After the setup is done a screen similar to the page below will appear stating ‘Your new project is ready’. Click on ‘Continue’.
The home project page displays most of the services & tools Firebase can assist you with for your project.
Now we need to register our app by clicking on the ‘</>’ (Web) option on the banner of this project page.
Enter a nickname for your app, and don’t forget to tick the checkbox saying ‘Also set up Firebase Hosting for this app’. Select a name for the website from the dropdown menu or give it a name of your own by clicking on ‘Create new site’. Then click on
We are done with registering our web app, after 1st step of registration follow the 2nd step by clicking on ‘Next’ because we will be setting up our projects will the help of node modules, and we can ignore the Firebase SDK setup.
The 3rd step here (refer image below) i.e. ‘Install Firebase CLI’ is to set up your local terminal for firebase tools so that you can access them through your command-line interface. Run the command ‘npm install -g firebase-tools’ on your local terminal to install the firebase tools for all your projects. Click on ‘Next’ to proceed.
Ignore the 4th step for now and go ahead by clicking on ‘Continue to Console’.
Congratulations! Your project has not only been created but also registered as a web app under the domain name you chose for yourself. Wait for it, Firebase is gonna make a lot of other things easy for you!
2: Implementing Firestore Database.
Click on the ‘Cloud Firestore’ option on the left panel. You will see a page as follows:
Click on the ‘Create Database’ option. A pop-up will appear on the screen (refer to the image below). Select ‘Start in test mode’ for now, you can later change to production mode. And then click on ‘Next’.
You will be now proceeded to selecting a server location for your Firestore. Select a server location of your choice ( if you have any, or let it be the default ‘nam5 (us-central)’ ). Click on ‘Enable’. Firestore will take some time to provide you with a database. Your database will look similar to this:
Now we have also created a database for our project using Firestore Database.
Firestore Database is a hybrid of the NoSQL & SQL databases. The general structure of this database is that we have a parent element named ‘collection’ in which we can create ‘documents’. Each document will contain various types of data we want to store in the Firestore Database. A collection can have multiple documents, and a document along with data can have multiple collections in it.
Sample database:
Well well well! Look who has a database all set up & ready, you!
3: Setting up Firebase in our React app.
Navigate to the Project Settings through the side panel & in the General section scroll down to the Your apps &select the Config option as shown in the fig. below. Copy this firebase configuration.
Create a file named ‘firebase.js’ in the src folder of your React app & paste the firebase configuration in the file. We need to also install & import the firebase dependency, initialize our app, create variables for database, authentication, storage, etc. with their respective methods. Export this variables so that you can use them anywhere in your project.
For installing the firebase dependency run the following command on your terminal inside your project older: ‘npm i firebase’
The resultant ‘firebase.js’ will look like this:
Woah! You have successfully integrated firebase into your React app, wasn’t that easy? Browse through the firebase docs to learn about what more services can you integrate with your React app.
Now come back here when you will be all done with your React app & you are ready to deploy your app online & share it with other developers & friends.
4: Deploying React app on Firebase
Open your terminal in the project directory & run this command: (to login to firebase through your project for security purposes)
firebase login
A pop-up browser window may open if you doing this for the first time. Login through the window.
The next step to initialize firebase in our project. Run the following command to do so:
firebase init
A question will be prompted asking ‘Are you ready to proceed?’. Type ‘Y’ to proceed & press Enter.
A nice CLI menu will pop-up (refer above image) asking which Firebase feature we want to setup, navigate down using the arrow keys to ‘Hosting’ & press the Space Bar to select ‘Hosting’. Press Enter to continue.
A new CLI will be prompted. Select ‘Use an existing project’ & a list of all your Firebase projects will shown to you. Select the appropriate project you are working on from the list to proceed.
A question will be prompted on the CLI asking ‘What do you want to use as your public directory?’ & by default (public) will be the answer which will appear on the CLI. Erase out (public) and instead write build there.
A new question will be asked ‘Configure as a single-page app (rewrite all urls to /index.html)?’. We will answer this question with a ‘y’ since we are using React.
Firebase initialization complete! We are almost done here. Two new files will be added to your project directory ‘firebase.json’ & ‘.firebaserc’.
Now, run ‘npm run build’. This will build the optimized version of your React app inside the ‘build’ folder.
Once the build is ready we will deploy our app to Firebase using the command — ‘firebase deploy’.
Once the command is executed your CLI will look similar to this:
Congrats!🎉
You have successfully deployed you React app using Firebase. The Hosting URL will be displayed in the CLI itself. You can yourself test your React app & share with everyone!
Tip (only for demo projects, not for production level apps ): If you had started your project in ‘test mode’ the firestore database will expire in 30 days, to avoid that visit the ‘Rules’ section of Firestore & modify it to look like this:
So fellow developers that’s was how you can setup various Firebase services for your React app. Hope you enjoyed the blog!🥳
Will meet you soon with a new blog. Till then, Happy Coding! 👨💻
