Deploy a React Application in Firebase

Hello guys, I’m Senura Jayadeva. In this tutorial, I will guide you to deploy a react application in firebase.

First of all, Open your command prompt and follow the following steps

• create a folder using mkdir sampleProject

• Navigate to the root of your newly created folder using cd sampleProject

• create a react application using npx create-react-app myproject

Okay! then you have to wait sometime until the build is finished.

After that, you can check whether the react application running or not by using npm start command.

If everything is fine you have to give npm run build command to create the build folder.

Okay! now we have to deal with firebase.

Here I assume you already have a firebase account. If not, you only have to sign up with google and you can easily create an account.

If you already have a firebase account sign in and click on the Go to console

Then click on the Add Project

Then you have to give a project name

In step 3 you have to select Default Account for firebase from the dropdown list and click on the Create Project.

After creating a Firebase project again we have to deal with the command prompt.

First, you have to install the Firebase CLI globally to your node modules by using npm install -g firebase-tools

Next sign in to firebase by running the command below.

firebase login

It will launch a web browser for authentication, and if the verification is successful you should see a verification success page. Return to the command line to verify a successful login.

After that, we have to initialize a Firebase project by using firebase init

This command initializes the firebase project and allows you to choose the firebase products to integrate into your React project.

Then they ask Are you ready to proceed? Press Y

Choose, Hosting: Configure and Deploy Firebase Hosting sites.

( To select hosting option use space and then press enter )

On the next prompt, choose an existing project.

Select your Firebase project from the list of projects from the Firebase platform. Here I'm selecting senurasampleproject as my firebase project

1. Instead of using the default public/ folder, we want to use the build/ folder for create-react-app.
2. On the Configure as a Single Page App (SPA) prompt, input Yes as we will be using React for the SPA.
3. If it prompts you to overwrite any files input No as we don’t want firebase overwriting the files generated by React.

Now our Firebase initialization is complete. Run firebase deploy to deploy the React app to firebase. After deploying the application you should see the URL in the console.

This is all about on deploying a React Application to the Firebase process.