Deploying your React App to Firebase Hosting
Tags: webdev, javascript, firebase, react
Published: 2023-03-30 17:22:13

Deploying a **React** app to Firebase Hosting can be a straightforward process. **Firebase** is a mobile and web application development platform that provides a range of services, including hosting, database, authentication, storage, and analytics. 
**Firebase Hosting** is a fast and reliable hosting solution that allows developers to deploy web applications quickly and easily.

In this tutorial, we will cover the steps required to deploy a React app on Firebase Hosting. We will assume that you have a basic understanding of React and Command Line.


**Prerequisites**
Before we get started, you will need the following:

- Firebase account
- React application
- Firebase CLI installed on your machine


**Step 1: Create a Firebase Project**

To get started, [log in](https://console.firebase.google.com/) to your Firebase console and create a new project. Give your project a name and select your preferred region. Once your project is created, navigate to the project dashboard.




![Creating firebase project screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yljiho37ktmxt4yyrml4.png)


Next, choose the platform for your app. In this case, we will choose "Web". Provide a name for your app and click on the "Register app" button.


![Select a web project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghdsv0hcsq87ksn1s5fo.png)

Firebase will generate a set of configuration keys for your app. Copy these keys to your clipboard, as we will use them later in the tutorial.


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


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


**Step 2: Install Firebase CLI**
Next, we need to install the Firebase CLI on our machine. The Firebase CLI is a command-line interface that allows us to interact with Firebase from our terminal.

To install Firebase CLI, open your terminal and run the following command:
```sh
npm install -g firebase-tools
```

Once the installation is complete, log in to Firebase CLI by running the following command:

```sh
firebase login
```
This will open a browser window and ask you to log in to your Firebase account. Once you are logged in, you can close the browser window and return to your terminal.

**Step 3: Initialize Firebase in Your React App**
Now that we have installed Firebase CLI, we can initialize Firebase in our React app. Navigate to your project directory in your terminal and run the following command:
```sh
firebase init
```
This will initialize Firebase in your project and create a firebase.json file in your project root directory.

Next, we need to configure Firebase Hosting. In the Firebase CLI prompt, select "Hosting" and press Enter. Then, select the project you created in Step 1.

Firebase will ask you to configure your hosting settings. Use the following configuration:

What do you want to use as your public directory? dist
Configure as a single-page app (rewrite all urls to /index.html)? Yes
File dist/index.html already exists. Overwrite? Yes

![Firebase Initialization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sp6vbtsyppm5hy4zf1q4.png)


**Step 4: Build Your React App**

Before we can deploy our app to Firebase Hosting, we need to build our React app. To do this, run the following command:
```sh
npm run build
```
This will create a production-ready build of your React app in the dist directory.

![Firebase Deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ys8cnt7ce854z1gme19.png)

**Step 5: Deploy Your React App to Firebase Hosting**
Finally, we are ready to deploy our React app to Firebase Hosting. To do this, run the following command:

```sh
firebase deploy
```

Congratulations! You have successfully deployed your React app to Firebase Hosting.

App is Live, preview it [here](https://react-app-d250f.web.app/)

**Conclusion**

In this tutorial, we covered the steps required to deploy a React app on Firebase Hosting. We started by creating a Firebase project and configuring Firebase CLI on our machine. Then, we initialized Firebase in our React app and configured Firebase Hosting. Finally, we built our React app and deployed it to Firebase Hosting.

Firebase Hosting is a fast and reliable hosting solution that allows developers to deploy web applications quickly and easily. It is an excellent option for hosting your React app, as it provides a range of features and integrations that can help streamline your development workflow.

If you encounter any issues during the deployment process, be sure to consult the Firebase documentation or reach out to their support team for assistance. Happy coding!