Quick Steps To Host A React Application Using Firebase

Yeah, you finished a React side project and you can't wait for it to be live. Don't stress Firebase is here to put a smile on your face. Oh Firebase is superman, so you know yourself.

What is Firebase

Let me quickly introduce Firebase that's if you have never heard of it.

Firebase is an app development platform that helps you build and grow apps and games users love. Backed by Google and trusted by millions of businesses around the world.

But today we will be making use of the Firebase hosting service with step-by-step guide to deploy a react application. let's go

• Create a firebase account if you have not or login to firebase if you have one.
  https://firebase.google.com/

• Click “Go to console” at the top right corner of the home page.

• Click “Add Project” to add a new project and follow the steps

1. Enter the project name.

2. Turn On and enable google analytics for the project.

3. Choose “Default account for firebase” as the google analytics account.

4. Click “Create project”

• Install firebase tools globally on your computer using the command.

npm install -g firebase-tools

Note : node.js must be installed on your system

• Now login to firebase in your terminal, to do this you must be inside the root directory of your React project before you enter the login command.

firebase login

• When you see the login command response “Allow Firebase to collect CLI usage and error reporting information” enter YES.

• When you enter yes it will redirect you to the Google authentication/sign-in page, then click “ALLOW” to login successfully.

• Run the react Build command on your application if you have not, to ensure that you are hosting the build version of your application.

npm run build 

• Now initialize Firebase in your project and answer the questions that follows

firebase init

1. Are you ready to proceed? (Y/n) YES

2. Which Firebase features do you want to set up for this directory?

   To select an option

   • Use up and down arrow to navigate.
   • Press Space to select features
   • then Enter to confirm your choices

Selected option > Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys.

• Next select “use exiting project” in order to pick the project created initially in the Firebase console. Select the project you want

• Next question is : What do you want to use as your public directory? (public) build

Type “build” as the answer

• Next question is : Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
  Type “y” as the answer

• Next question is :Set up automatic builds and deploys with GitHub? (y/N)

Type “N” as the answer

• Next question is :File build/index.html already exists. Overwrite?

Type “N” as the answer

• Run the deploy command to host the application on firebase.

Firebase deploy 

Wow that was easy and fast.

Thanks for reading and please leave a comment to help improve this article