Deploy ReactJS on Firebase Hosting
Published: 2022-03-14 00:20:11

# Useful for you, consider buying me a coffee. Thanks!
- Please if this is useful and helps in your purpose, consider offering me a coffee, thank you, so we can evolve together!

ETH:
0xdfaf8F1bCaaB513A14E5a0B8C2D0bF7EE6ECabbc 

<a href="https://www.bitcoinqrcodemaker.com"><img src="https://www.bitcoinqrcodemaker.com/api/?style=ethereum&amp;address=0xdfaf8F1bCaaB513A14E5a0B8C2D0bF7EE6ECabbc" alt="Ethereum QR Code Generator" height="300" width="300" border="0" /></a>


First we need you to have knowledge in **React, NodeJS, Java Script, GIT, FRONTEND, Deploy**.

https://console.firebase.google.com/

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/al7ut5behlrybyjsbowz.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t7lz2mm79bon5j78m5fo.png)

Create a new project with the name. Okay, now that we have the project created we can use several **Firebase** tools, one of them is **Hosting**, but feel free to use others, in this article we will only deal with hosting.

In the Firebase dashboard click on **Hosting**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gmjd2qfth5dbfok6d6ya.png)

You need a **React** frontend project already ready, and then we will build this project on firebase hosting, we will also use the domain provided by them, but of course we can change it in the future.

You will need to have the **Firebase** dependency package for the **Node js**

Install the **firebase-tools** package globally, this package will be installed on your computer and not in the project itself. This firebase utility will help us to run commands and connect that project we created in the firebase hosting.
Run the command:

```
npm install -g firebase-tools
```
Let's go to the console shell, inside the *React* project folder

I'll use this React project as an example:

https://github.com/guillerbr/ghd-sites

Clone the project and enter the folder:

![Alt ​​Text](https://dev-to-uploads.s3.amazonaws.com/i/urqsuz19egvc6ganer85.png)

Install the application, packages and dependencies.

```
npm install
```

Inside the root of your React project, type the command to build (build).

```
npm run-script build
```
# or:

```
npm build
```

Then **npm** creates the static files already transpiled and configured to be lightweight files. After running the command it will create a **build** folder where the files we need will be.

![Alt ​​Text](https://dev-to-uploads.s3.amazonaws.com/i/gutrt16chz4mx5yanq70.png)

![Alt ​​Text](https://dev-to-uploads.s3.amazonaws.com/i/rj7fyzrntjqa01o2uglq.png)

Now we need to link our React application to our Firebase Hosting services. For this we will use the **firebase-tools** that we installed at the beginning.
Type the command:

```
firebase login
```

You need to be authenticated to Google Firebase account with your browser, after the above command Google may ask for some verification to link your application in shell console, your Firebase account in browser. If Google opens the Browser and asks for account authentication. Accept and complete the operation.

![Alt ​​Text](https://dev-to-uploads.s3.amazonaws.com/i/b42x44uteveg1obp0ddq.png)

Ready! The console says I'm authenticated and gives my *email*.

Inside the project root, let's type the commands for final configurations.
Type the command:

```
firebase init
```

Accept the confirmation, and you will have these options in the console:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6juhl4ninpt00gnukif2.png)


Choose option:

```
Hosting: Configure files for Firebase Hosting and (optionally) set up Guithub Action deploys
```

Now we will have the new configuration step:

![Alt ​​Text](https://dev-to-uploads.s3.amazonaws.com/i/7h25svr9g8nsy1pvwu7i.png)

Choose option:

```
Use an existing project
```

A list of projects and their names will appear. Now we need to choose the name of the project we created in firebase. Mine is **ghdsites2**

![Alt ​​Text](https://dev-to-uploads.s3.amazonaws.com/i/s8c3hvbvwh45nh05yish.png)

Now we will drop into the public directory configuration part.

![Alt ​​Text](https://dev-to-uploads.s3.amazonaws.com/i/5z9n7jos2ms9v7jwhgps.png)

Now type the command:

```
build
```

This question will appear:

```
Configure as a single-page app (rewrite all urls to /index.html)? (y/n)
```

Choose option:

```
yes
```

This question will appear:

```
File build/index.html already exists. Overwrite? (y/n)
```

Choose option:

```
no
```

![Alt ​​Text](https://dev-to-uploads.s3.amazonaws.com/i/3ev4meprhtbvzokk7ldw.png)

Now we will go to the final part of construction.
Type the command:

```
firebase deploy
```

![Alt ​​Text](https://dev-to-uploads.s3.amazonaws.com/i/cq9mnojalpkgu6h98au9.png)


READY!
FINALLY!

After doing all these procedures, the firebase console will inform you that the process was completed successfully and your application is already hosted with a domain and ready to be accessed.

![Alt ​​Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1qx3pbxd3oeubkfjdvh.png)

![Alt ​​Text](https://dev-to-uploads.s3.amazonaws.com/i/obq3kq3h7jjkgjnui2oq.png)