Host a React based website free of cost with Firebase Hosting and connect with your own custom domain

Yes you read it right “Free of Cost” , now you can host your website using Firebase Hosting service without paying anything, as long as your usage does not exceed those Free Hosting Parameters. And believe me for a beginner this is more than enough. When your website become popular and you need more resources, you can just simply switch to any paid plan. As mentioned in Firebase official site “ Start for free, then pay as you go”.

In this article we are going to demo it step by step by creating a basic react application. You can use any framework or basic HTML, JavaScript to develop you website. Lets Start …

Step 1: Create a new project in Firebase Console

Login into Firebase Console with your gmail id, and click on Add Project to create a new project.

In the popup insert your Project Name, it will auto-generate a Project ID, which you can edit also. Accept all terms & conditions and press Create Project button.

Our Firebase project is ready now, Lets create a basic React app.

Step 2: Download and install Node.js

Download Node.js from below site and install.

Download | Node.js

Step 3: Install yarn node package

Once Node.js successfully installed, Open your terminal or command prompt and run below command

npm i --global yarn

Step 4: Create a new React App

From command prompt use below command to create a new react app —

npx create-react-app <your_app_name>

Our basic react app is created with basic files and packages installed.

Project Folder view in Visual Studio Code

Step 5: Install firebase-tools npm package

Use below command to install firebase-tools package from command prompt

npm install -g firebase-tools

Step 6: Log into Firebase from command prompt

Once firebase-tools is installed, use below command to log into Firebase —

firebase login

Step 7: Initialize Firebase Project

Now we need to initiate Firebase project inside our project folder. From command prompt navigate inside your React application project folder and run below command —

firebase init

Once you run that command it will go through few project setup steps and questions —

? Are you ready to proceed? Yes

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.

Navigate by up and down arrow key and select “Hosting: Configure and deploy Firebase Hosting sites” option by pressing space bar.

In next step it will ask you to select a Firebase project. If you don’t see your Firebase project ( the one your created at step 1) listed there, just select “don’t setup a default project” option. Later you can use “firebase use --add” command to link your react project with Firebase project.

Next it will ask us for the location of public folder. Firebase hosting expects all content of web application inside a “Public” folder. Inside our project folder we have a folder named Public. But we are not going to mention that as our public folder of Firebase project. Because when we build a React project it puts all it’s content inside a folder called “build”. So we are going to mention build as our firebase project public folder.

And at last it’s going to ask us if we want configure a single-page app. Just type Y and press enter.

Our firebase project is initialized now. But as I mentioned above, if you not able to setup any default project earlier, we need to setup it now. If you already selected a default project earlier then skip this below command.

firebase use --add

Step 8: Build your application

Run below command to build your application

yarn build

It will create a build folder inside our project folder with all static files of our application.

Step 9: Deploy your application

Now our firebase project is ready to deploy in Firebase Hosting. Just use below command to deploy it —

firebase deploy

If you got a screenshot like below with message “Deploy complete!”, that’s it you have successfully deployed your first web application in Firebase Hosting … awesome.

Now open that Hosting URL link in any browser and hurrah… you will able to see your hosted web application.

We have already deployed our web application in Firebase hosting successfully. Now if you have a registered domain and you like to connect your app with that domain then continue with the next step.

Step 10: Connect to your own domain

Open Firebase Console and select Hosting from left hand side menu.

Now click on connect domain button at the right hand side.

In Connect Domain window enter the domain you own and click Continue.

Now in verify ownership step you can see it instructing you to add “TXT” record to your DNS provider for verification purpose.

Now just copy the Value text.

I brought my domain from GoDaddy, if you brought from any other service provider then just log into that service provider’s site and open domain maintenance page.

Click on DNS button.

You will see a set of records are already defined there. Now click on ADD button.

Now under Type select TXT, put value of Host field as “@”, under TXT Value field paste the value you copied from your Firebase console and then click Save.

Once the record successfully saved then go back to your Firebase console and click the Verify button. After successful verification you will see a screen like below —

We need to add another 2 records under our DNS settings. Value column will contain IP addresses which we need to add.

First remove any existing A or AAAA records from your DNS Management.

Now add A records same way how we added TXT record earlier.

Type: A

Host: @

Points to: copied value from Firebase console (IP address)

3 configuration records added

Once both A records successfully added then go back to Firebase Console and click on Finish button. Now your Firebase Hosting dashboard will show your custom domain there.

You may see status against your custom domain is “Pending”. It is because Firebase take few hours to complete all the processes. But it won’t stop you to open your domain in browser. So just click on the link there or type your domain name on browser and you will see your hosted website.

Initially you may see “Your Connection is not Private” error on browser. Just ignore it and continue by clicking Advanced button. It happens because it take some time for Firebase to activate the SSL certificate.

Yahoo… our website with custom domain is hosted now.

happy coding …