Hosting a website on Firebase and setting a custom domain

Firebase is a user friendly platform which can be used to deploy our websites free of charge. It is Google’s mobile application development platform that helps us to build, improve and grow our applications. And also Firebase is a realtime database which enables to store and sync data at anytime.

First, lets deploy a website on firebase.

1. Go to the console of your firebase account and create a new project. Your don’t have to create a firebase account because it is automatically created when you create your google account.

2. In order to use firebase we have to use nodejs which is available in nodejs.org. Make sure you download the latest version of nodejs. Download the file and install it to your pc.

3. After installing nodejs go to the command prompt and use the following command to install the firebase tools.

npm install -g firebase-tools

4. Then using firebase login command login to the firebase using cmd. Follow the authentication steps in order to make it success.

5. Then go to the folder which contains the files of our website. Make sure that the web page which you want to display is named as index.html. Otherwise firebase will not recognize it. Then create a folder named public and store those files inside that public folder.

Then open the cmd in that particular directory.

6. Use following command to initialize firebase and follow steps in order to fulfill your requirements.

firebase init

Then use you have to deploy the web page using ‘firebase deploy’ command.

Here you can see the hosting URL. Using that URL you can see your web page hosted.

Lets move to the next part of the article which is setting a custom domain to the hosted web site. First you have to buy a domain, I used to buy domains in namecheap because I am a cheapskate.

Now you can go to the project on firebase and click on add custom domain.

When you click the Add custom domain window will pop up. There you have to type the domain name you bought and then there will be a check box that says redirect to an existing website, leave it unchecked. And click continue.

Then you should copy the statement which is in the value column.

Then go to your namecheap account and follow these steps.

Domain name> Manage > Advanced DNS> Host Records

Then insert a TXT record and paste the statement which copied from firebase.

And also create CNAME record with www as the host and value with the domain name.

It will take couple of minutes to verify and you are in the final stage of setting the custom domain.

Once the verification done you will be directed to the Go Live page and there you will see 2 records with the values of ip addresses. Copy those ip addresses and you have to add 2 A records with the host @ instead of your custom domain into the Advanced DNS settings. Paste copied ip addresses to the values of A records..

And then click finish and you will have your website in your domain.