How to Host Your Angular Application With Google Domains and Firebase Hosting

Nearly-free hosting

Steven Popovich
Mar 24 · 5 min read
Image for post
Image for post
Photo by Brandi Redd on Unsplash

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!

Getting Started

First, set up your Firebase project in the console. Create a new project.

Image for post
Image for post

You don’t need analytics and you can enable that later if you want. Give your project a good name and create your project!

Image for post
Image for post

Now you are inside your Firebase console for your project. Go to hosting. Click get started.

Image for post
Image for post

Follow the steps prompted. In your project directory on a terminal, run npm install -g firebase-tools. You don’t need to see the other steps about the JavaScript SDK.

Image for post
Image for post

Run firebase login and firebase init in your project directory. Pay attention and read below about the init command.

Image for post
Image for post

The init CLI is a little confusing so read carefully. You only need hosting.

Image for post
Image for post

Add your Firebase to the project.

Image for post
Image for post

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 -—prod.

After running ng build, you should have a dist folder that looks something like this:

Image for post
Image for post

If the dist folder matches what you have in your firebase.json, you can run firebase deploy.

If that all goes well, you should be able to go to the Firebase console and see the deployment. Something like this:

Image for post
Image for post

So, let’s see our site. Above the release history, you should see a URL that looks something like this:

Image for post
Image for post

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.

Bonus Pro-Tip

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.

Image for post
Image for post
Photo by Pero Kalimero on Unsplash

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.

Image for post
Image for post

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: XXX.XXX.X.XXX.

Image for post
Image for post

Now you need to go to your manage Google Domain page. Go to DNS and scroll to Custom resource records.

Image for post
Image for post

We are going to plug in those numbers from Firebase to look like this:

Image for post
Image for post
I am not sure the IP’s are unique or need to be hidden

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 yourdomain.com and www.yourdomain.com.

We will set up www.yourdomain.com to redirect to yourdomain.com and yourdomain.com will have the actual site. You can configure it how you want.

Your configuration should look like this:

Image for post
Image for post

The configuration for the bottom site should look like this:

Image for post
Image for post

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.

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store