How to add Firebase to your React App

2 min readAug 2, 2022

Step 1: Create your React app (Node must be installed in you system).

chanakyha@mac:~$ npx create-react-app project_name

A React App will be installed on the folder in which you have mentioned the name. Open the folder it in Visual Studio Code.

Download Visual Studio Code from here: https://code.visualstudio.com/download

Step2: Create a Firebase Project.

Open up your Browser and Go to Firebase website https://firebase.google.com, you will see a button named Console written in it click that. You will be redirected to a page where your previous Firebase Projects will be displayed. Click Add a Project to create a new Project.
Proceed by giving a name for your Firebase project, Then it will be prompting do you want Google Analytics in your project, uncheck it and click continue. Your Firebase Project will be launched within 10secs after finishing these steps.

Step 3: Get your WebConfig from Firebase Project.

After creating your Firebase Project, you will be redirected to the dashboard. Go to Project settings, There will be section called Your apps. Create a Web App in that, you will be prompted again with some steps, Fill it out will your relevant project details.
After filling out you will be given a config JSON data, which will look like this.

Config ⬇️const firebaseConfig = {
  apiKey: "Your Api KEY",
  authDomain: "Your Auth Domain",
  projectId: "Your Project Id",
  storageBucket: "Your Storage Bucket",
  messagingSenderId: "Your Messaging Sender ID",
  appId: "Your App ID"
};

Note: Do not share the config file to anyone. These details must be confidential.

Step 4: Integrate React with your Firebase Project

Install Firebase dependency using npm or yarn package manager. Latest version is Firebase v9.

chanakyha@mac:~$ npm install firebase              orchanakyha@mac:~$ yarn add firebase

Create a Javascript file with name firebase.js. Then type the following commands.

import { initializeApp } from "firebase/app";const firebaseConfig = {
  apiKey: "Your Api KEY",
  authDomain: "Your Auth Domain",
  projectId: "Your Project Id",
  storageBucket: "Your Storage Bucket",
  messagingSenderId: "Your Messaging Sender ID",
  appId: "Your App ID"
};const app = initializeApp(firebaseConfig);export { app };

Note: Store the Details of the Configs in a .env file, so that it will be secured.

Now your can import the app to your required components.

Thats it your React App is now integrated with your Firebase Project.

Follow for more 😄

Social Media Links 💚:Github: https://github.com/chanakyha
Twitter: https://twitter.com/Chanakyha_Vetri
LinkedIn: https://www.linkedin.com/in/chanakyha-vetrichelvan-21025b135/Portfolio: https://chanakyha-coder.xyz
Linktree: https://linktree.chanakyha-coder.xyz

How to add Firebase to your React App

Written by Vetrichanakyha