A FireBase Js By Sagar Jaybhay

Firebase Js:

Firebase is a backend platform it is for building web, android, and IOS applications. What firebase offers it offers real-time database with different API’s with multiple authentication types and hosting platform.

Mainly firebase is developed for front end people who don’t want more back-end tasks and easily done his job. In nutshell, it mainly for presentation layer stuff you can store, google provide a database which is firebase and you can access that database by using their APIs.

Main Features of Firebase:

  1. It’s a real-time database
  2. Authentication
  3. Hosting

Advantages Of FireBase

  1. It’s simple and easy to use and is user-friendlymeans there is no need for complicated configuration
  2. Data is real-time means what? It means supposeyou insert any record in database and 100 different are connected to thatdatabase. Then without requesting the latest data, they will get the latestdata by automatic update it means real-time data synchronization in short.
  3. It is having a very simple dashboard
  4. You can find many useful services to choose from.

You can find the pricing of the firebase plan https://firebase.google.com/pricing on this link and what it offers in the free plan.

How to setup firebase in your JavaScript project?

Below is an official link to set-up firebase https://firebase.google.com/docs/web/setup

But in Nutshell, I will explain here how to do this.

Step 1:

Create a firebase project

Step 2:

Register your project

In this goto, https://console.firebase.google.com/?pli=1 add project

A FireBase Js By Sagar Jaybhay

In your Html or index file add below script tag

      <script src = "https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
This firebase js CDN use this 

Also, we can use npm or bower to install firebase command for this is below

npm install firebase --save
bower install firebase

Step 4:

Add firebase SDKs and Initialize Firebase

You can add any supported firebase product to your app as per your requirement. When you need to add Firebase SDK to your app is solely depends on you how you configure means whether you have chosen use firebase hosting or Node npm or Module Bundlers.

Load Firebase SDK from Hosting

When you load Firebase SDKs from reserved URLs in our site means in our site beginning with /_ _. This reserved namespace makes firebase easier to host other firebase products.

If you want to include only analytics products to your code you can do this like the below code.

  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="/__/firebase/7.3.0/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="/__/firebase/7.3.0/firebase-analytics.js"></script>

The above code includes the entire firebase SDK rather than individual SDKs.

In this step, there is no need for a firebase configure object because we use reserved hosting URLs. But if need you can see below a sample of firebase configure object.

  <!-- Previously loaded Firebase SDKs -->

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>
var firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appId: "app-id",
  measurementId: "G-measurement-id",

Firebase Javascript SDK Supporting product:

A FireBase Js By Sagar Jaybhay
Image From Official Google Site


The firebase data is represented as a JSON object.

A FireBase Js By Sagar Jaybhay

How to Write Data In Firebase Database?

In firebase we have Set method for write or replace data on specific path.

var Person = firebase.database().ref("Persons/");

Person.set ({
   John: {
      number: 1,
      age: 30
   Amanda: {
      number: 2,
      age: 20

The above method creates a collection of persons and added their 2 names.

How to Update Firebase Collection?

For this we can use update method provided by firebase js and code looks like below

var johnRef = firebase.database().ref("Persons/John");

johnRef.update ({
   "number": 10

How to read firebase data?

For retrieving firebase data we can use on() method. This method takes event type as value and then it will retrieve the snapshot of data. After that use the val() method to get javascript representation of that.

var ref = firebase.database().ref();

ref.on("value", function(snapshot) {
}, function (error) {
   console.log("Error: " + error.code);

For firebase hosting use this link:- https://firebase.google.com/docs/hosting

Pricing For FireBase:-https://firebase.google.com/pricing

Leave a Reply

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