Use firebase with react

Apel Mahmud
4 min readJul 24, 2020

--

firebase with react

Today I will show you, How to start to react project with firebase as a beginner. it is very simple to do that. Firebase is a mobile and web application development platform. it is for backend development and google is its organizer. Firebase executes it incredibly easy to create online real-time databases, run server-side functions, manage app authentication, and deploy your apps with minimal force and at competitive rates.

Step-1: Create react app

So, Let create at first a react project app by using-

  1. npx create-react-app fireAuth.

and check this project name is fireAuth.

2. cd fireAuth

3. npm start

and then you able to see the react project on lacalhost:3000

Step-2: create firebase for react app

Excellent! Let’s start now create firebase to backend development for our fireAuth project.
go to the firebase website and click the Get Started. Also, you can see a video beside the “Get started button”. I highly recommend you as a beginner you should have to see full video. However, click Get started button and you see an add project dashboard to create a firebase project . after then go to add project and Enter your project name as like as same react fireAuth.
Don’t worry! I have given you screenshots .so you can easily determine it.

Click Get started Button

Step-3: Click add project

Click add project

Step-4: Enter your project name

Enter your project name and click Continue Button

now, click the Continue button for the next step and follow this direction then again click the continue button. In this section firebase ready fireAuth project for you. And successfully you have done it.

Step-5: Click Continue. Here you can enable or not enable “Google Analytics” for your project. if you have knowledge about google analytics you can go the next step with it.

Click Continue

Step-6: Firebase creating your project…

Firebase Creating your project

Step-7: And next firebase ready your project

Your Project is ready

Step-8: Next Click web

After your project ready, you can see a firebase dashboard, here you click web icon to go to the next step.

Click web

After done above then you follow the next step.

Step-9: Now Add a nickname and add site name then click Register app button

Add nickname and site name then click Register app button

Step-10: Here click the next button to go to the next step. you can avoid this dashboard rules because you gain it in the docs.

Avoid this here

Step: -11: Run the command npm install -g firebase-tools in your react project.

npm install -g firebase-tools

Step-12: Just follow this instruction carefully go to next.

Step-13: Here click indicated by the arrow.

Follow the arrow indicate

Finally firebase docs in front of you. here you find anything to fully set up your project and at the end time, you can deploy your react app fireAuth.

follow left side

If you follow all the above guidance. I ensure that you can create a new Firebase project with react. It is nothing difficult to do. just simple. Also, I always recommend you go to youtube and see more tutorial on how to use firebase with react because sometimes video tutorial is good than an article.

--

--

Apel Mahmud
Apel Mahmud

Written by Apel Mahmud

Jr. Software Engineer (React | React Native | Next | JS ) at Techvillage, Bangladesh | https://apelmahmud.vercel.app/

No responses yet