CRUD operation using Firebase and Vanilla JavaScript

In this article you will get a basic understanding of how you can do CRUD operation using Firebase and Vanilla JavaScript.

What You Will Learn?

At the end of this article you will have knowledge to make a JavaScript class that is capable of doing CRUD operations on cloud firestore. Note that this article does not provide any UI base knowledge.

Now, Let’s Begin…

Create a Firebase project

Go to firebase console and click on Add Project. Then Give your project a name as shown below and click continue.

create firebase project

Register a web app in your newly created firebase project also give a nickname to you web app when registering as shown below

Register Web App In Firebase Project

After registering your app you will get a quick guide on how you can add firebase sdk into your project

Notice that firebaseConfig variable. These are the configuration keys that will connect our web application with our firebase project. Copy these configurations because we will be needing those.

Create Firestore Database

Now that your web app is ready. Go to Cloud Firestore and Create a database in Test mode and click Next and on the next step choose the default location for server and click Enable. You can easily switch to production mode after you are done with the development.

What is Cloud Firestore?

Cloud Firestore is a NoSQL database that contains collections and each collection can contain documents. Click here to learn more.

Client Side Setup

Now that our firebase project and web app is ready let’s use it in our client side code.

Go ahead and create a new directory in your system and add two files in it index.html and main.js

File Structure of client side

Inside index.html add firebase sdk and configuration keys at the bottom of HTML body tag and initialize firebase and firestore. This firebase variable is available to you from firebase sdk. Remember to add latest firebase and firestore CDNs as shown below.

After the initialization of firebase and firestore add your main.js file. Make sure you add all of your scripts after firebase and firestore initialization.

index.html

CRUD

We will be storing users contact information in our firestore database. To do that open main.js file and add a new User class with users collection reference. db.collection will return a reference of the collection if there is no collection of the name given to it then it will generate that collection and return it’s reference.

main.js — User

Now we will be adding all user’s crud method inside User class. Go ahead and add methods in the User’s class as shown below

To add a user we just call the add() method on userRef and pass our user object. Notice we are using async/await here because almost every method that we call from a database collection’s reference returns a Promise. When the add() method’s Promise is resolved we will a get document reference this is a JavaScript object with bunch of properties and prototypes but we are interested in the id. This id is autogenerated by firebase for our document. After our user document is created we return this user.

main.js — User.add

To get a list of all users in out collection we will add a new method in our class getAll(). This will return an Array of all user’s documents present inside our users collection. Inside this getAll() method we will use get method on our usersRef this will give us a snapshot of all the documents. On each document we pull the id property and call document.data() method to get the data of document. We put together the id and data of document in an object and then push it in an array and when the iteration of all snapshot is finished we return that array

main.js — User.getAll

To get a single document from a collection we need to give the document id to usersRef which will return the document if the requested document does not exist the exists key will be false of returned document

main.js — User.get

Deletion of document is also easy you just need to select the document by its document id and then call delete method on it

main.js — Users.delete

That’s it you can use this User class in your app and if you don’t want to use classes and want to have pure functions to use firebase you can do that too it’s completely fine.

GitHub Repository

Click here to see my GitHub Repository for a better understanding of code

Hope this article is useful. Feel free to reach out to me for any queries.