How to use Firestore Database in React JS

It is a comprehensive backend solution offered by Google that simplifies the process of building, managing, and growing applications. When developing mobile or web apps, handling the database, hosting, and authentication can be challenging tasks. Firebase addresses these challenges by providing a range of features.

Now for using The Firestore in the React JS project , we need to go through some steps:
1. First, we need to install the firebase in the reactt. For it we have use the npm command.
2. Go to Firebase web . Create a Firebase Project and then go to Firestore database
3. Now go to Authentication section for Authenticate our Firebase.
4. After verifying the Firestore Database. The API key, authDomain, project ID will get generated.

Now, go to our React app file. Create a firebase.js file. In this file we will define our all generated values.


// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import {getAuth} from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: "G-19F2FD27NT"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth();
const database = getFirestore(app); 

export {app, auth, database};

Here I am using .env file for define my values. As our site will stay protected if we use through this way. As for intial testing purpose we can remove the process.env.REACT_APP_FIREBASE_API_KEY with the original API key.
Now run the commands :
1. npm install -g firebase tools
2. firebase login
3. firebase init : In that select option :
hosting: use space bar
select project
4. npm run build
5. Firebase deploy


Leave a comment

Your email address will not be published. Required fields are marked *