Connecting React App to firebase

React App to firebase – The number of technologies and services we must utilize at the same time causes a lot of modern-day weariness while creating web apps so in this article we will cover how to connect React App to firebase.

The challenge is: how can we enhance our efficacy while using the fewest technology possible? The technology we pick should, ideally, have well support and well established by the community.

So in this article, we will look at how to use firebase with your web apps and is this technology supports it or not… Here will use only five steps that you need to follow.

Create React App

Go to the directory or location where you wish to create the app in your terminal. And execute this command.

npx create-react-app example-firebase

In the above npx and create-react-app are the commands to create a react application. Where example-firebase is the folder name or your project name.

Then using the following command, go to the app directory.

cd example-firebase

That’s it we cover our first step now move to the second step.

Install firebase module

To install the firebase module, use the following command in your terminal.

npm i firebase

It will take some time to install. After installing check your package.json and in the dependencies section you will find firebase with all other dependencies.

That’s it we cover our second step now time to move on to the third step.

Create app in Firebase console

Go to the firebase console, if you are not logged in with your firebase console then the first login or signup then go to the add new project option add your first project name, and then click continue.

Click on create project after disabling Google analytics. (If you wish to keep it enabled, simply keep it enabled and start a project.) The creation of the project will take some time. Simply wait for the next screen to appear.

That’s it we cover our third step now time to move to the fourth step.

Register you app

In the below picture you will see three symbols. To register your app for the web, click the web symbol. which is marked as red color.

After that, give your app a name and register it.

You will see the configuration code for your app when it has been register. Copy that code. In order for us to be able to use it in our react app.

That’s it we cover our fourth step now time to move to the fifth step.

Adding Configuration code to react app

Open any code editor which you like most for this I am using a vs code which is efficient and easy to use. In your src folder create a new file name firebase-config.js. After creating a new file your file structure of the app looks like this.

After registering our app, paste the configuration code we copied from the Firebase console. Also, export must be include before the const app. As a result, we’ll be able to import that app variable into another file.

That’s it we cover all our steps to connect with firebase.

Additional Practice to make Code easier

You may save the API key and other variable settings in the .env file (this is a recommended practice to follow before making your code public). Create config.env file in example-firebase folder(in main root folder).

And create a variable as indicated in the image. This convention must be follows when creating variables in the .env file of a react project.

REACT_APP_VARIABLENAME

After you’ve added all of the settings to the config.env file. Change the code in the firebase-config.js file. Instead of value, use the variable you defined in the config.env file.

That’s it hope you get all thingThat’s all for this article if you have any queries please contact us through our website or email us at [email protected]