Firebase is one of the best platforms to host a static website for free. When we have a website hosted on firebase we get two domains assigned to it. For example, the project id for my portfolio website which is already hosted on firebase is ‘ankit-kumar-cv‘ therefore the URLs assigned to it were:
- project-id.web.app → ankit-kumar-cv.web.app
- project-id.firebaseapp.com → ankit-kumar-cv.firebaseapp.com
Now all this information is visible on Firebase Console → Project Dashboard → Hosting Tab. Apart from these two domains if we want to assign a domain of our choice to the website we can do it too. Here we will see step by step process of adding a custom domain in firebase hosting.
There are two requirements to be fulfilled before adding the domain to firebase hosting:
- A website hosted on firebase. In my case it is ankit-kumar-cv.web.app.
- A domain. There are many domain registrars out there like GoDaddy, NameCheap, hostinger, and else. But here we will buy my domain from Google itself. There are many benefits to buying a domain from Google.
Step 1: Buying domain
First, we need to go to domains.google.com and search for the name you want to see Google recommendations. If you want to stick to the name of your choice click on the all endings tab. Choose the available one and add it to the cart.
You can go to the cart page and checkout with the payment method of your choice. After checking out you will take to this page. And it will ask you to verify your email. After you are done with the verification the domain is yours.
You can click on the DNS tab. As other changes will be made there.
Step 2: Adding the domain to Firebase hosting
Step 2.1: Add domain
Go to the console.firebase.google.com, choose the project. And click on the hosting tab. It would look something like this.
Click on the add custom domain button. A form will appear like this, asking you to add the domain.
Add the domain you have bought and click continue.
Step 2.2 Verifying Ownership
As both the firebase and domain registrar was Google’s products, we don’t need to verify the ownership of the domain to the firebase. But this step is mandatory if we are using any other domain registered like GoDaddy or Namecheap. Like the other steps, it is not difficult at all. All one needs to do in this case is to add a custom record of TXT type in the DNS management page of the domain registrar. This process usually takes around 5-12 hours which can extend up to 24 hours.
Step 2.3 Going Live
As our domain gets verified automatically on the screen you can see we directly jumped from the first step to the third step. In this step, we will be connecting our domain to the firebase hosting. To connect our domain to the hosting there are two ways:
- Quick Setup: It is for the new website, which is adding domain for the first time.
- Advanced: For the website already hosted on another platform.
In the connect domain window there are two A records that need to be added to the DNS page of the registrar and in case if any other A or AAAA record is present it should be removed.
If we simply try to add two custom domain records of but A-type, then we will get an already in use error. What we can do is refer to this chart. This is how we should add custom resource records. To see this table for other registrars click here.
This is how I have done this. To make sure everything works fine I have added both the IP’s in A-type record with host @ and www.
After this is done you can click finish on the connect domain window and it will show status pending like this.
It can take around 24 hours to set up but in my case, it took only two hours. After the connection is made the status will change from pending to connected.
After the connection has been made you can click on the like to visit the site you have hosted. Here we have added ankitkumar.app and www.ankitkumar.app (here www. Is the subdomain) to the firebase hosting simultaneously the process is no different you just have to type www. at the time of adding domain and rest is same.
For more information on adding a custom domain to firebase, hosting click here.
Attention reader! Don’t stop learning now. Get hold of all the important CS Theory concepts for SDE interviews with the CS Theory Course at a student-friendly price and become industry ready.