Hosting your React Web App to Firebase

In this story, we will be looking into hosting your react web app to google firebase.

Please read my last story about creating a sample react web app if you are not yet created one.

Create React JS Application

First, we need to create a firebase project for our application.

For that, go to https://firebase.google.com/ and login with your google account.

Once you logged in, you have to click on “go to console” button and then select “Add Project” option from there.

After adding the project, you need to click on “Add Firebase To Your App” and register your app like below.

Then you will be provided with a firebase SDK

Just copy it and paste it in your index.html like below.

Once, you copied it, go to your project directory through terminal or command prompt and execute below command.

$ npm run build

It will create a build directory on your project root.

Now install firebase tools

$ npm install -g firebase-tools

Now we have to login into firebase,

$ firebase login

This command will take you into google login page on your browser and you can login to the same account used for firebase from there.

Let’s initiate firebase CLI now.

$ firebase init

Navigate by up or down arrows to hosting and press space bar to select it and press enter.

Now you have to select the project using up or down arrows and press enter

Now we will need to select a directory for deployment as we are already built our application once, we have a build directory. So, we need to specify it here.

Enter N for Configure as a single-page app (rewrite all urls to /index.html)? and press enter.

Now it will add a 404 error html file to our build and will ask to overwrite our index.html, Enter N there and press enter.

That’s it the firebase initialization completed.

Now we have to deploy our application. For that, execute the below command.

$ firebase deploy

Your react web app will be now deployed like below

Using the hosting URL, anybody can access your hosted app.

There is an option in firebase to add custom URL also to your app.

I will be back with a new story soon, Thank you for reading.