# How deploy React to Firebase Hosting

To deploy a React app to Firebase Hosting, follow these steps:

### Requirements

1. **Install Firebase CLI**: Ensure you have Node.js installed, then install Firebase CLI by running:
    
    ```typescript
    npm install -g firebase-tools
    ```
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728479766454/16ad0dc8-beaf-4568-86d2-b0cb04ad225e.png align="center")
    
2. **Login to Firebase**: If you haven’t already, log in to your Firebase account using the CLI:
    
    ```typescript
    firebase login
    ```
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728479835864/296c0d21-fe80-4573-b149-061a3563c05c.png align="center")
    
    `ITS AUTOMATIC TO REDIRECT TO YOUR BROWSER. IF NOT COPY THE LINK`
    
3. **Firebase Project**: Make sure you have a Firebase project set up. You can create one in the Firebase Console: https://console.firebase.google.com/.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728479682306/6dd9b91b-adbe-4c21-81b1-17b82c473b26.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728479699530/2014bcaa-41bf-451e-a6e3-82472f3c408c.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728479717043/c6c85d2f-1fc6-4336-8000-9432d9f7f0fe.png align="center")

### Steps to Deploy React App to Firebase Hosting

#### 1\. Create a React App (if not already created)

If you don’t already have a React app, create one using `create-react-app`:

```typescript
npx create-react-app react-router
cd react-router
```

#### 2\. Initialize Firebase in Your React Project

In your React app’s root directory, run:

```typescript
firebase init
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728479903187/3279b856-f3d0-40d1-ad52-37b951adb2b9.png align="center")

When running `firebase init`, you'll be prompted with a few questions:

* **Select Firebase Hosting**: Use the arrow keys to navigate and space bar to select "Hosting: Configure and deploy Firebase Hosting sites".
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728480010860/017b3872-b24b-4754-b3f0-485665449c43.png align="center")
    
* **Choose a Firebase project**: Select the Firebase project you created earlier from the list.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728480040239/f432bbd4-9d9e-485f-9d66-c729ddb58074.png align="center")
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728480059519/333563bd-b643-435d-a284-cd45e63ed557.png align="center")
    
* **Set up a public directory**: Type `build` as the public directory (this is where your React app will be built).
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728480095646/b46f4428-fcfc-4bfb-a284-7632e88d823a.png align="center")
    
* **Single-page app**: Answer `Yes` to "Configure as a single-page app (rewrite all URLs to /index.html)?"
    
* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728480129570/5be7a4cd-64cf-4d81-b442-8a4ee11fd968.png align="center")
    
* **Overwrite existing** `index.html`: If prompted, choose `No` (Firebase will create its own hosting configurations).
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728480151741/d8c58c2b-b57b-4b52-86a2-08c08c84f23e.png align="center")
    

#### 3\. Build the React App

Before deploying, you need to build your React app. This will create an optimized production build:

```typescript
npm run build
```

This command generates a `build` folder, which contains your entire application optimized for production.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728480178697/5f5dfc9c-2fa0-4430-9d43-708edc081878.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728480212503/1ae614b4-c2a1-41fc-a1c7-7ed3d0d1c6ee.png align="center")

  

#### 4\. Deploy to Firebase Hosting

Once the build is ready, deploy your app to Firebase Hosting by running:

```typescript
firebase deploy
```

#### 5\. Firebase Hosting URL

After deploying, you will see a specific URL where your app is hosted, like:

Use the **Hosting URL** to access your live React application.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728480276803/4177b9a3-45f1-409d-b785-1c1fb790d128.png align="center")

  
  

---

### Useful Firebase Hosting Commands:

* `firebase deploy`: Deploys your project to Firebase.
    
* `firebase serve`: Serves your app locally on a development server (useful for testing Firebase Hosting setup).
    

---

Now your React app should be live on Firebase Hosting! You can access it via the URL provided by Firebase, which will look something like

[https://react-router-thirdy.web.app](https://react-router-thirdy.web.app).

Github:

[https://github.com/thirdygayares/react-router](https://github.com/thirdygayares/react-router)