Hosting React app on Firebase
Tags: firebase, react, deploy
Published: 2021-12-28 04:40:13

Firebase provides options for hosting static, dynamic web apps very easily. In the free tier, you will get the option to add one domain also. When it comes to React applications, Firebase makes it very easy to deploy the app.

### What we are going to do?
- Create a project on Firebase
- Setting up Firebase hosting
- Creating a basic project in react using CRA
- Deploy the app to Firebase
- Updating app

## Create a project on Firebase
Visit [Firebase](https://console.firebase.google.com) to create a project. You can log in to the Firebase console using your Google account. Create a new project.

Click on `add project`

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

Enter a new project name
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31m22qh9nc1qoap142q7.png)

You can skip analytics if you want, click on continue.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oixvuyyqv6c9mthah5m5.png)
This may take some time. After it will redirect to your dashboard.

## Installing Firebase CLI
You can install Firebase CLI using npm. In terminal:
```
npm install -g firebase-tools
```
Login to Firebase using CLI, in terminal:
```
firebase login
```
This will automatically open up the default browser, if not copy the URL shown in the terminal. After login, it will show a success message.

To test whether it is working or not, type in terminal:
```
firebase projects:list
```
This will list all the projects.
## Creating a basic project in react using CRA
To create a react application, in terminal:
```
npx create-react-app react-example
```
We are not doing anything extra work on this, we are going to just deploy it. Now let’s build this app.

#### - Build project
```
npm run build
```
This will create a production-ready app stored under folder `build`.
#### - Initializing Firebase in the project
Now we have built our app, it’s time to deploy it. In terminal:
```
init firebase
```
This will prompt some questions. 

* Select `hosting`

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

* Select `use an existing project`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k72t8j9lzuln7vb9qrj3.png)
This will list all the projects you have. Select our project from the list.

* Type `build` since our app is in that folder.

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

* Since this is a SPA all the URLs need to be redirected to index.html

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

* Firebase will try to create a index.html which is not required since we have already index.html file. Type `N`

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

The above steps will initialize Firebase in our project directory. You can see a new file created inside the project named firebase.json
```json
{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
```
## Deploying App
Deploying apps is very easy with Firebase CLI.
```
firebase deploy
```
This will deploy the app in Firebase and give the hosted URL.

You can visit Firebase to view the current details about the hosted app.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stc9o4j1zz5mejgambag.png)
You can add a custom domain if you have one.

## Updating app
To update the app, after making the new version all you have to do is build the app again.
```
npm run build
```
Then,
```
firebase deploy
```

Happy Coding :D