Connecting React App to firebase
Tags: firebase, react, javascript, tutorial
Published: 2021-10-21 04:38:57

## Create React App

Open your terminal and go to the directory or location where you want to create the app. Run this command

__npx create-react-app firebasetut__

Go into the app directory by command

__cd firebasetut__

## Install firebase module

Run this command in your terminal to install firebase module

__npm i firebase__

It will take some time to install. After it get install check your __package.json__ file and in the dependencies section you will find Firebase with all other dependencies.

## Create app in Firebase console

Go to [firebase console](https://console.firebase.google.com)
Give name of your first project and than click __continue__.

![Firebase Console Step 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gcu7r65h7sb3cyzuk79o.png)

Disable Google analytics and than click on __create project__. (_It's optional if you want to keep it enable than keep it enable and create project_). It will take sometime to create project. Just wait and you will see the another screen. 

![Firebase Console Step 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmvdykknb3tryj107tx3.png)

## Register you app

Click on the __web symbol__ to register your app for web.

![App Register](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3rp9ub728xl021rl749.png)

Than give your app a __name__ and __register it__. After it get registered you will see the __configuration code__ for your app copy that code. So that we can use it in our react app.

![App SDK](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mj02eo2tak0s5q8mn75l.png)

## Adding Configuration code to react app

Open any code editor. I'm using [vscode](https://code.visualstudio.com › download
). You can clone this [repository](https://github.com/dubey-Ji/Firebase_tutuorial/tree/main) to start the project.

In your __src folder__ create new file name __firebase-config.js__
After creating this file. __File structure__ of your app will look like this.
![File Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nouowqozyr9ng8cbbf2n.png)

Paste that __configuration code__ which we copied from the firebase console after registering our app. And __very important add the export before const app__. So that we can import that app variable in other file.
![Firebase Config Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xv5v6p9urbpj8kz6e8by.png)

__Your React App is connected to firebase__

## Additional

If you want you can store the configuration file apikey and other variable values in .env file(_It's a good practice to follow before making your code public_). Create config.env file in firebasetut folder(__in main root folder__).
![Config.env file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocosqi90aqbj2u4mibyk.png)

And make variable like shown in image. If you are creating any variable in .env file of react app you have to follow this convention __REACT_APP_VARIABLENAME__
After you have done adding all the values in config.env file. Change your firebase-config.js file code. Instead of value write this variable which you have created in config.env file.
![Firebase Config File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfrm2lcrgjakv67vssbs.png)

Finally we have done connecting our react app to Firebase and can make our code public.