Integrating Firebase to Web Application

INTRODUCTION

Firebase is a set of tools developed by Google for creating mobile and web applications. If you're a beginner, it's really easy to develop and deploy your app at firebase. Firebase also provides a bunch of useful tools which includes analytics, realtime database, multiple authentication types and hosting.

HOW TO ADD FIREBASE TO YOUR WEB APPLICATION

In this blog i’ll show you how to integrate firebase to a web application and fetch data from cloud firestore database

SETTING UP FIREBASE

Go to console.firebase.google.com and click on add project and set a name for your project. (google analytics will be turned on by default, if you want to turn it off click on the toggle button) click on continue to create your firebase project.

Now, firebase project will be created and it will automatically get redirected To the project dashboard. go to the project settings menu and click on the web icon.(</>)

Now it's time to register your application, set a name for your application and click on register app, copy the configuration object and then click on continue to console.

CREATING A JAVASCRIPT PROJECT

Open your favourite text editor and run npm init -y command in the terminal to initialise a node js project. I'm going to use visual studio code as my text editor for this project.

run npm install firebase command in the terminal to install the firebase library.

Create a folder src which will contain all source files, under src create index.js file and index.html file.

Now, open index.js file and import the following functions

Syntax for importing firebase services:

import {functioname} from ‘firebase/;

Import initializeApp function from firebase/app directory, call initializeApp function and pass the configuration object (which we had copied from the firebase console in the previous step) as the parameter.

BUNDLING JAVASCRIPT CODE

Web browsers don't understand the imports which we had made in our javascript file, in other words the browser doesn’t know where to find the library files. Therefore, we need to bundle our javascript code before running it on a browser. module bundling is a way to combine multiple javascript files into a single file. If you are using front-end frameworks such as react,angular or vue.js you can ignore this step because these frameworks handle module bundling automatically behind the hood.

I'm going to use webpack for bundling javascript code. To do so,in the terminal run npm install webpack webpack-cli command and wait for web pack to get installed

Then open package.json file and add the following value in the script object.

scripts:{
“build”:”webpack”,
}

Now, open your terminal and execute npm run build command, webpack will automatically bundle all your javascript files into a single file. After the command gets executed you can see a folder named as dist in your project directory, which will contain your bundled javascript file.

CREATING A CLOUD FIRESTORE DATABASE

Go to your project console and click on the build menu in the sidebar and then select firestore database. Which will take you to the firestore console. click on create database start the database in test mode.

Now, it's time to add some data into your firestore database, click on start collection, specify a name for your collection and then click next.

Create a document in your collection by specifying the field and value.

FETCHING DATA FROM CLOUD FIRESTORE DATABASE

IMPORTING THE REQUIRED FUNCTIONS

It's time to fetch data from the firestore database, open index.js file and then import the following functions.
import {getFirestore,onSnapshot,collection} from ‘firebase/firestore’

Now invoke getFirestore function

getFirestore function is a service getter function which takes firebaseapp object as a parameter and returns a reference to the cloud firestore database.

CREATING A REFERENCE TO THE COLLECTION

Collection function takes 2 arguments, a reference to the firestore database and the name of the collection, and it returns a reference to the collection. Now by using this reference we can access the documents in a particular collection.

FETCHING DATA FROM THE COLLECTION

You can fetch the data from the firestore database in multiple ways, but the way which I prefer the most is by using the onSnapshot function. Invoke onSnapshot function and pass two arguments, first argument is the reference to your collection and the second argument is a callback function which takes a parameter(snapshot). Now using the map method iterate through documents.

Make sure that you run npm run build command when ever you make any changes to your javascript file.

Finally, link your bundled javascript file with your index.html file using script tag and open your index.html file in a web browser.

OUTPUT: