DEV Community

Sourav Majumder
Sourav Majumder

Posted on

Firebase CRUD Operations for Web Applications

Firebase is a NoSQL database. NoSQL means we don't have to write any query language to fetch the data or don't have any constant schema. Firebase is owned by Google.

Firebase is widely used by developers and companies of all sizes, from small startups to large enterprises, to build high-quality mobile and web applications.

To interact with Firebase we need to first create a Firebase project. First login into the Firebase account. Then select add a new project, and give a project name. Then from the dashboard, there are many options. From the project overview go to the project setup. Below you will find the add app option. Click on it. Give your app title. Install the Firebase into your application. You can install using this,

npm install firebase
Enter fullscreen mode Exit fullscreen mode

Then copy the config file and paste it into the firebase-config.js file. You have to create the file manually and then paste the config contents. Then you have to set the firebaseAuth like this,

const firebaseauth = getAuth(app);
Enter fullscreen mode Exit fullscreen mode

At first we have to change the rules in firebase so that we can apply CURD operations in firebase. To change rules, go to the rules and change the if else true to if else false. That's it. 

Now it's time for us to show how CRUD operations happen in Firebase.

Create: To create a collection we can go to the Firestore database and create a collection manually or we can write code to create a collection. Here is a sample code,

Image description

Here, for creating a collection you need to pass the metadata of your documents and the name of the collection. setDoc function will create the collection for you. You have to import this from firebase/firestore. Firebase is a collection of data. In each collection, you can have multiple documents or you can create another collection that will create a complex database for you.

Read: To read from the firebase, we have two ways. We can read all the documents or we can read a single document.
Now to read a single document,

Image description

Here, you have to pass the collection reference which is the path of the collection or simply the collection name. Like this "Account" or "Account/AccountList". And the id is the document id of which document you wanna fetch.
Now to read all the documents,

Image description

At first, we need to write the query for which data collection we need to fetch. Then pass the query into onSnapshot function which will fetch the real time data from the firebase. You have to import this from firebase/firestore. We use onSnapshot to fetch the real time data, if you change anything now that will be fetched from the firebase.

Update: Updating is simple in Firebase. We just need to pass the update value that's it, here's how

Image description

Now, to update you have to pass the update metadata to dataObj (you can give any name) and get the reference of your collection and pass them to the updateDoc function. You have to import this from firebase/firestore. This function will update the desired document.

Delete: To delete a document or collection we can write this code,

Image description

You have to provide the name or reference of your collection and the desired _documentID _you wanna delete. You have to import this from the firebase/firestore. To delete a collection you have to go to the website and manually do that.

Thank you for reading this. I hope you find something useful. If any queries feel free to contact me. And for more you can always visit the documentation of Firebase.

Top comments (0)