Integrating Firebase to Web Application
Tags: firebase, webdev, cloud, javascript
Published: 2022-12-28 08:17:47

**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](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.

![firebase console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/al429kqb2kx2rv2odzki.png)

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.(</>)

![firebase project console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ss6nvm5pt6yisr8fomlb.png)

![firebase project console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vigpldwmsr5amhul5fwy.png)

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.


![firebase app registration page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nwlsrmypen202vjfn85.png)

**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.


![initializing node JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4hrd8qxstrkyvql79s7v.png)

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


![installing firebase libraries](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98y8cogmo2kcarwfd7is.png)

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/<service>;

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.


![initializing firebase app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/piduyp9iwjvm0cwx765f.png)

**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”,
}


![configuring build command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yuvb94wwhsqjrl5fixk.png)

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.


![initializing firestore database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lsqhnhqi80y0ua3xpl8d.png)

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.

![creating a collection in firestore database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxpvnj4nnwj1jid7wzn4.png)

**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

![reference to the collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ap7ki2uibq8wf4sh66ut.png)
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.


![fetching data from firestore database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gi5ftw6rokyh6ts338ne.png)

**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.


![linking javascript file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3itbcbsmhwu0kome2u24.png)

OUTPUT:

![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1bxriho1wqosfmmgzf8.png)