Easiest way to use Firestore for web

Serverless system is expanding day by day. It actually helps by providing a usable database without the use of an extra backend server. So we can get rid of the backend server’s extra pain. Where Google Firebase is providing a solution called Firestore for that. It’s scalable for various types of devices. Firestore will manage everything for us we don’t need to do anything related to the server. We will just integrate the firestore to our web project and then simply use their methods for crud operations.

How to create a database in firestore?

Go to firebase firestore then create the project and app then go to the console and then you will see firestore on the left sidebar just choose it from there. Then you will able to create your first database. Then you can open any number of collections you want. Where collections contain many documents which are a set of data’s.

How to integrate firestore with react ?

First of all, we need to install Firebase and Firestore in our project through NPM or YARN. After that, we will create a file called firebase.js inside of our src folder. In this file, we have to declare important configs related to it like the below screenshot.

Now you can easily operate any kind of CRUD operation anywhere in the application just by calling the “db”.

Let’s see how to do CRUD operations !!!

  1. ADD Data to firestore

import { db } from ‘./firebase’;

async function addData() {

const aTuringRef = db.collection(‘collection name here’);

const res = await aTuringRef.add(‘Here the data you want to store’);

console.log(res);

}

2. Delete data from firestore

import { db } from ‘./firebase’;

async function delData() {

const aTuringRef = db.collection(‘collection name here’).doc(‘The id of the doc you want to delete’);

const res = await aTuringRef.delete();

console.log(res);

}

3. Update a doc

import { db } from ‘./firebase’;

async function updateData() {

const aTuringRef = db.collection(‘collection name here’).doc(‘The id of the doc you want to update’);

const res = await aTuringRef.update(‘new value you want to put by update’);

console.log(res);

}

4. GET data from firestore

import { db } from ‘./firebase’;

async function getData() {

const snapshot = await db.collection(‘collection name’).get();

snapshot.forEach((doc) => {

console.log(“id:” doc.id, “data:” doc.data())

}

Thanks to everyone…

Cybernaut — who is learning tech by doing it: Programming : Problem Solving