Easiest way to Add Firebase to React App

The easiest way to Add Firebase to React App

Hey! developers

This article will teach you the easiest way to Add Firebase to React App. Almost 21 percent of developers use firebase in their projects. This makes it the most popular cloud platform. It is one of the best ways to seamlessly integrate with the backend.

Today, we will connect it with our react project. This article is for absolute beginners as we cover it from scratch.

Let's get started!

What is Firebase?

We should be familiar with it if we want to work with it. Let's take a look at it.
Firebase is a backend application development platform that enables developers to build android, IOS, and web applications. It is developed by google and is one of the most popular cloud platforms in the world. The tools like tracking analytics, real-time database, fixing app bugs, creating marketing, and much more enables you to develop robust applications.

It's time to add React App.

Add React App to a Firebase Project

Firebase uses your google profile to log in. If you don't have a google account, create one. Without skipping any step, follow the given steps one by one.

1. Go to the Firebase console.
2. Click Add project or Create a project.
   

3. Enter a project name and click Continue. Also checked all checkboxes.

   

4. You can enable google analytics for your project if you want. Otherwise, you can disable it. Then click Continue or create a project.

   

5. Once the process is done, Click Continue.

Your firebase project is created. It's time to make our React A pp. We will connect it later.

Creating React App

Go to Visual Studio Code and open its terminal. Or you can use Windows Power Shell. Now, paste the given commands into your terminal one by one. We will create React App with the help of Vite js. You can also make it by using a regular webpack like npm create-react-app.

# To create react app
  
	npm create vite@latest
  
# To goto app

	cd project-name
    
# To install dependencies / node_module

	npm install
  
  

We created our App. Now, install firebase in your application.

Installing Firebase

Install it in your App.

npm install firebase

To ensure you can check your package.json file. If firebase is downloaded, it will be visible in the dependencies.

Connecting React App to Firebase

Follow the given instruction to connect your App to the firebase.

1. Then click the (</>) web icon to set up a firebase for the web application.

   
2. Now, Enter your web app's nickname and click the register button.
   
3. After registration, you can see an image as shown below. Copy the code from firebase and keep it for later.
   

4. Go to your React App and create a file firebase.js in src folder. Copy the given code shown below and paste it into your firebase.js file. Change the highlighted code with your data.

   // Import the functions you need from the SDKs you need
   import { initializeApp } from "firebase/app";
   // TODO: Add SDKs for Firebase products that you want to use
   // https://firebase.google.com/docs/web/setup#available-libraries
   
   // Your web app's Firebase configuration
   const firebaseConfig = {
     apiKey: "REACT_APP_apiKey",
     authDomain: "REACT_APP_authDomain",
     projectId: "REACT_APP_projectId",
     storageBucket: "REACT_APP_storageBucket",
     messagingSenderId: "REACT_APP_messagingSenderId",
     appId: "REACT_APP_appId"
   };
   
   // Initialize and exporting Firebase
   export const app = initializeApp(firebaseConfig);
   
   
   

5. Run your application via npm run dev.

6. Click continue to console.

Now, you are redirected to the project overview dashboard. Try to refresh the page. If you can find a result like in the image. Your application is connected successfully.

Now, we are going to test our connection via Firebase Realtime Database.

Tutorials that makes you a hero!!!

Testing our connection via firebase real-time database

Now, we will check whether our connections weather is working or not. Our first step is to create a real-time database, and then we will test our connection.

Creating firebase real-time database

1. Click Realtime Database. You can see it in the previous image.
2. Click Create Database.
   

3. Now, Click Next. 

4. Select "start in test mode" and click Enable.

   

   We use test mode to read and write data in the firebase database.

Now, you will be redirected to your firebase database. You can also see the example below.

We created our database. It's time to test our connection.

Testing our firebase connection

To test your firebase connection, follow the instructions given below.

1. You need to add your firebase database URL to firebase.js the file. Instead of the highlighted text, add your firebase database url in the form of key-value pair. In place of  Firebase_Database_URL adding your database URL.

   // Import the functions you need from the SDKs you need
   import { initializeApp } from "firebase/app";
   // TODO: Add SDKs for Firebase products that you want to use
   // https://firebase.google.com/docs/web/setup#available-libraries
   
   // Your web app's Firebase configuration
   const firebaseConfig = {
     apiKey: "REACT_APP_apiKey",
     authDomain: "REACT_APP_authDomain",
     projectId: "REACT_APP_projectId",
     storageBucket: "REACT_APP_storageBucket",
     messagingSenderId: "REACT_APP_messagingSenderId",
     appId: "REACT_APP_appId",
     databaseURL: "Firebase_Database_URL"
   };
   
   // Initialize and exporting Firebase
   export const app = initializeApp(firebaseConfig);
   
   

2. Now, In the App.jsx file add the given code. This code adds data to the firebase database.

   import React from "react";
   
   //Importing firebase database
   
   import { getDatabase, ref, set } from "firebase/database";
   
   //Importing firebase configure file
   
   import { app } from "./firebase";
   import './App.css'
   
   // Enteracting with firebase database
   
   const database = getDatabase(app);
   
   const App = () => {
   
     // Function that add data in firebase database
   
     const getData = () => {
   
   // Set data to firebase database. ref: ref gives the refrence of database location or path.
       
       set(ref(database, "website/codearmor"), {
         id: 1,
         name: "Code Armor",
         url: "https://www.codearmor.in"
       });
     };
   
     return (
       <>
         <div>App</div>
         <h1>Send data to Firebase Database</h1>
         <button onClick={getData}>Add Data</button>
       </>
     );
   };
   
   
   export default App
   

   In this file, First, we import some methods from the firebase database. Let's discuss what to do?

   getDatabase:- This method is used to interact with the firebase database.

   ref:- This method sets the reference of the database location.

   set:- This method adds the data to the firebase database at a specific location given by the user.

   We use

3. Now, run your App. If you will see the result in your browser like this.

   
4. Click Add Data.
5. Now, Go to your firebase database and observe data. Your data will look like this 👇🏼👇🏼👇🏼.
   

If this App is adding data to the database, it works properly.

You are ready to go!

Conclusion

We learned the easiest way to add firebase to React App. You can create a real-time projects like real-time web applications with firebase. This gives a boost to your portfolio. Try it and be a hero of the firebase.

This article tries to give you the best information. Share if you learned something from this article. Try to leave a comment in the comment section. It means a lot.

Happy Coding!