Firebase Hosting on a Google Domain

Part 3 of A simple guide to hosting a free website using React and Firebase

3 min readMar 3, 2021

Google Firebase and Google Domains are unsurprisingly both owned by Google. However getting them to play nice is surprisingly not well documented. The following steps explain how to get a Firebase hosted web app served through a custom Google Domain.

Step 1: Buy a domain

You may have already identified a domain name or you might be about to spend the next 4 days philosophizing over Humans great unanswered question.

CrapName.com or GoodName.crap

If you’re having trouble deciding, play around with a domain generation service like NameMesh and remember you can always change it later. Once you’ve decided on a name, head over to Google Domains to buy that baby before anyone else does.

Step 2: Link Hosting

Head over to your Firebase console and to the hosting section. If you followed the steps in Part 1 you should see a release history. To begin setup click Add custom domain

Now enter your custom domain. You don’t need to select redirect. If you want www.yourdomain.com to redirect to yourdomain.com you will set that up later. Click continue to move to the next step.

Luckily with Google Domains you can skip the whole verification step. The next step is to add your A records to your domain. Leave this setup window open and open a new Google Domains tab. Navigate to your custom domain in my domains and click manage.

In the DNS settings, under ‘Custom Resource records’ add the IP addresses from the firebase wind. Click Add and the changes should be sent out.

Step 3: Redirect www

If you go back to firebase you should see a callout to add www redirects.

Click Add and then you will be taken through the same dialog as before. Leave the settings as current. You’ll see that the IP addresses are the same as previous. Head back to Google Domains.

Enter the same as before but this time make sure the Name is set to www. Now we play the waiting game

Step 4: Check progress

Firebase will show the changes as pending for up to 48 hours, although it normally takes a lot less time. You can check on progress using DNS Checker

This is part (3 of 3) of the series “A simple guide to hosting a free website using React and Firebase”. If you enjoyed this series please 👏 and I’ll make more.