Add Firebase database to your app

Stela Capsa
3 min readAug 10, 2021

--

After creating a new project with firebase, https://stela-capsa.medium.com/setting-up-firebase-with-react-9226b1e92f42

before deploying the project (step 6), we have to add a real time data base.

After creating the firebase.js file in the vs code, and past the firebaseConfig code in it, and than run in the terminal

$ npm i firebase

In the firebase.js import firebase and add couple more lines of code that will give us the access to the db.

One more step to follow going back to the console.fierbase.google window, click Firestore Database button.

Then create database button.

For the next window set “Start in test mode”

After pushing next, leave the next window as default.

DONE

Is not over yet, we need to create the tables with props.

Past in the props, with the values in the collection, and save it.

In order to see the props from Firestore we need to add state and map over data collection. First import the db, and add useState, useEffect to import React line.

and the state functions are

to display the data on the server we have to map over posts in the return <div>.

Last step, let’s deploy . Run in the terminal

$ firebase init

for the next steps follow along using arrows up and down from key board, to select an option use space button from keyboard than press enter.

Here just wright build, this line of code will generate a new folder in vs code.

After completing all the steps run

$ npm run build

Run!

$ firebase deploy

The Host URL link from the terminal you can share it and view it. I learn and code along from youtube videos of Clever Programmer.

https://twitter-clone-fe602.web.app

Happy Coding!

--

--