Deploying a React App to Firebase
Tags: react, codenewbie, webdev
Published: 2020-03-30 20:37:47



![enter image description here](https://res.cloudinary.com/dis3a42lz/image/upload/v1584352214/blog/Deploying%20a%20React%20App%20to%20Firebase/firbase-deploy-banner_1.png)
Photo by [Kvistholt Photography](https://unsplash.com/@freeche?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/servers?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

This article was originally published on my [Blog](https://samailabala.com/blog/deploying-react-apps-to-firebase)

With [JAMSTACK]([https://jamstack.org/](https://jamstack.org/)) gaining popularity in 2020, platforms that offer serverless services such as Firebase are also on the rise. In this article, we will be discussing on how to deploy a React app to Firebase.

## Prerequisites

This tutorial assumes you have at least the following:  

- Beginner knowledge of JavaScript and React.

- Node.js v10.x.x or higher

- yarn or npm

  

## Create a React App
  
To begin we are going to create a react app:

1. Create a React app

```shell
npx create-react-app deployFirebase
```

2. Start it to be sure everything is ok

```shell
npm start
```

## Create a Firebase Project

Next, we create a firebase project:

1. Go to [Firebase Console](console.firebase.com)

2. Click on new and fill in the information relating to the project

3. On the Dashboard, create a web app for the project.

4. Open up a terminal and install the firebase-cli

```shell
npm install -g firebase-tools
```

5. Sign in to firebase by running the command below.

```shell
firebase login
```

It'll launch a web browser for authentication, if the authentication is successful you should see an authentication success page.

![Firebase Authentication Successful](https://res.cloudinary.com/dis3a42lz/image/upload/v1585505945/blog/Deploying%20a%20React%20App%20to%20Firebase/firebase-authentication-successful.png)

  
## Configuring the Firebase Project

1. Initialize the firebase project

```shell
firebase init
```

This command initializes the firebase project and allows you to choose the firebase products to integrate into your React project, for this tutorial we will be going with the hosting option.

1. Choose, Hosting: Configure and Deploy Firebase Hosting sites.

2. On the next prompt, choose an existing project.

3. Pick a project to be hosted on the list.

4. Press Enter on the next prompt to use the default public directory generated by React.

5. On the Configure as a Single Page App (SPA) prompt, input No as we will be using React for the SPA. 

6. If it prompts you to overwrite any files input No as we don't want firebase overwriting the files generated by React.

  
![Firebase CLI](https://res.cloudinary.com/dis3a42lz/image/upload/v1585505938/blog/Deploying%20a%20React%20App%20to%20Firebase/firebase-cli.png)

Once the process is complete a `firebase.json` and `.firebaserc` files are created. The `firebase.json` file contains information on the location of files, assets, and settings relating to the project. The `.firebaserc` file stores project aliases which can be used in setting different hosting options for the same application, one for staging and the other for production.


## Test and Deploy

After setting up and configuring the firebase project it is advisable to test it locally before deploying:  

1. Run `npm build` to build the project, it should output a build folder in your project root directory with the compiled files of the project.

2. Run `firebase serve --only hosting` to view the static content of your firebase hosted app. It should launch the application in your web browser.

3. Run `firebase deploy` to deploy the React app to firebase.

After deploying the application you should see the URL in the console.

## Conclusion

While this article focuses on deploying a React Application to Firebase the process can still be used for other Frontend frameworks with little modifications. Also, Firebase has a nice set of products that are worth checking out.