Firebase Firestore Notes - CRUD Operation (Vanilla JS)

How you can use firebase firestore in your web app just by using plain javascript. Perform CRUD operations on firestore database using javascript.

Table of Contents

S.N	Content
1.	Introduction
2.	Setting Up Firebase Firestore with our Web App
3.	Notes on Firebase firestore
4.	Conclusion

Introduction

Cloud Firebase Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud. Like Firebase Realtime Database, it keeps your data in sync across client apps through realtime listeners and offers offline support for mobile and web so you can build responsive apps that work regardless of network latency or Internet connectivity. Cloud Firestore also offers seamless integration with other Firebase and Google Cloud products, including Cloud Functions.

Cloud firestore is easy to use and is developer friendly. You can easily get started with firestore by going through its documentation as google has the best documentation available. 

Firebase Firestore can also be used to store data of your web apps. Firestore gives us ability to store and retrieve our data in no time using simple few lines of codes. In this blog you will get some details about how you can use firestore in your web app just by using plain vanilla JavaScript. The notes given below include all the CRUD (Create, Read, Update and Delete) data from firestore database using plain JavaScript.

Before getting started make sure that you have created a firebase account with a project in it. If you have created the firebase project then you can move ahead. If you don't know how to make firebase project then follow this blog post which will let you know all the things about setting up your project. After you are ready setting up your project firebase project follow the below steps to connect firebase firestore sdk to your web app.

Setting Up Firebase Firestore with our Web App

1. First of all you need to create a collection in your database. So to do so go to your firebase project and the click on Firestore Database from left panel and click on Create Database.

2. After that choose Start in test mode and click Next. Then set Cloud Firestore location and click Enable. After some time your database will be ready. Then click on Start collection and give a name to the collection. Also make a document and give data to the document. In you don't want to give document id while creating a document then click on Auto-Id to generate a random document id.

3. You need to go to your dashboard and click on the Add app to add a new app to the project. Then click on Web to add web app.

4. Then you need to enter you app name and click Register the app. Wait for it to register and you will get your sdk details which will link your web app with your project. Copy it from there and paste it in your project (In my case index.html ).

5. Then you can remove the comments and copy the top 2 script tags and paste it in your head tag. Paste the remaining code after your body tag. Then your code should look like this:

6.  Then paste the below code at the bottom of the script tag after firebase.analytics(); . Then you are ready to write your firebase firestore code. You can create a separate index.js file to write your firestore code.

const db = firebase.firestore();

The ways for interacting with your firebase firestore db through vanilla javascript is given below . In this case I am using my project's details so you can change the collection names according to your collection name.

Notes on Firebase firestore

-To get document all datas from firestore collection

db.collection('cafes').get().then((snapshot) => {
    snapshot.docs.forEach(doc => {
        console.log(doc.data());
    });
})

-To get document particular/ filtered data from firestore collection

db.collection('cafes').where('city', '==', 'Kathmandu').get().then((snapshot) => {
    snapshot.docs.forEach(doc => {
        renderCafe(doc);
    });
})

-To get document particular/ filtered data in order from firestore collection

db.collection('cafes').where('city', '==', 'Kathmandu').orderBy('name').get().then((snapshot) => {
    snapshot.docs.forEach(doc => {
        renderCafe(doc);
    });
})

-To get specific document in a collection

db.collection("cafes").doc(id);

-To refresh real time data

db.collection("cafes")
  .onSnapshot((snapshot) => {
    let changes = snapshot.docChanges();
    changes.forEach((change) => {
      console.log(change.doc.data());
      if (change.type == "added") {
        renderCafe(change.doc);
      } else if (change.type == "removed") {
        let li = cafeList.querySelector("[data-id=" + change.doc.id + "]");
        cafeList.removeChild(li);
      }
    });
  });

-To store/add data in firestore collection

db.collection('cafes').add({
    name: form.name.value,
    city: form.city.value,
});

-To delete a document

db.collection("cafes").doc(id).delete();

-To update document data

db.collection('cafes')..doc(id).update({
    name: "Niraj",
    city: "Kathmandu",
});

Conclusion

In this way you can perform firebase firestore database CRUD operations using vanilla JavaScript. You can also create a simple app using these operations. You can explore my Cafe App project to know more about CRUD app in plain JavaScript using firestore database.

Reference - Cloud Firestore

Get more tech news and coding guides at The Info. Docs.