Add Firebase database to your app
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.
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
$ 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.
Stela Capsa - Student - Flatiron School | LinkedIn
Professional in Software Engineering, with emphasis in full-stack development applied to web elaboration, database…