How to Host Your Angular Application With Google Domains and Firebase Hosting
Let’s say you have an Angular project and you want to start sharing it with people. Maybe it is your personal site, maybe it’s a blog.
You want a professional website so you need a professional domain. You go to Google Domains and buy your domain name. Now what?
Well, what if I told you could host your website for free* with another Google product? (*Free if it doesn’t get much traffic.)
Host your project with Firebase Hosting!
First, set up your Firebase project in the console. Create a new project.
You don’t need analytics and you can enable that later if you want. Give your project a good name and create your project!
Now you are inside your Firebase console for your project. Go to hosting. Click get started.
Follow the steps prompted. In your project directory on a terminal, run
firebase login and
firebase init in your project directory. Pay attention and read below about the
init CLI is a little confusing so read carefully. You only need hosting.
Add your Firebase to the project.
When you see this directory prompt, just hit enter, we will edit it later. Then hit N (no) when it asks if you want to configure as a single-page app.
Great. So, we should have a Firebase-ready Angular project. Let’s deploy it.
We need to make a few configuration changes. You should have a file called
firebase.json. You need to make it look like this:
With this change made, run
ng build, you should have a
dist folder that looks something like this:
dist folder matches what you have in your
firebase.json, you can run
If that all goes well, you should be able to go to the Firebase console and see the deployment. Something like this:
So, let’s see our site. Above the release history, you should see a URL that looks something like this:
The .com website should have your Angular application!
This is the trickiest part, if this didn’t work for you, please let me know in the comments.
I edited my
package.json to have this command:
You can then just run
npm run deploy and your website will rebuild and the changes will be pushed to Firebase instantly.
OK, so we have a website in the cloud. But we don’t want to have people go to that ugly Firebase URL. So let’s get our site connected with a custom Google domain.
You may have noticed, in Firebase Hosting, there is a big
Add custom domain button. Click it and enter your Google domain name.
I have already added my domain, so I can’t easily get screenshots, but you will reach the
Go live step. You will get a couple of IP numbers that are in this format:
Now you need to go to your manage Google Domain page. Go to DNS and scroll to
Custom resource records.
We are going to plug in those numbers from Firebase to look like this:
Both numbers should be in both rows. These are all the changes that need to be made in Google Domains. Head back to your Firebase console…
The last thing you need to take care of is people going between
We will set up
www.yourdomain.com to redirect to
yourdomain.com will have the actual site. You can configure it how you want.
Your configuration should look like this:
The configuration for the bottom site should look like this:
And that’s it! It may take anywhere from 12 to 48 hours for the site to go live on the custom domain, but you should be all set.
Thanks for reading! If you have any questions or need help, please respond below.