Backstory

In short, configuring a custom Google domain to Heroku is always a challenge. I figure this will help more people than just me. But I wrote this for my future [erm, tired] self.

Prerequisites:

• Have a Domain on Google Domains.
• Have an application hosted on Heroku.
• Have a piece of candy (To curb your pent-up frustration).

Step 1. Add your domain to your Heroku app.

From your Heroku app’s dashboard, select:

YourApp > Settings

On the settings page, scroll down to the Domains and certificates section and click the Add domain button.

When you enter your domain into Heroku, be sure to use the following format: www.[your-domain].com (Note: www is key!)

(Note: .com is used only for simplicity purposes, it can be .co, .edu, .org, etc.)

Note: Once you’ve added your domain, copy the DNS Target url provided by Heroku found just below the Add domain button. You’ll need it later.

Step 2. Configure Google Domains DNS settings.

From your Google Domains home dashboard (registrar), select:

Configure DNS

Scroll to Synthetic records. Under the synthetic records, make sure to select Subdomain forward from dropdown menu (This should be set by default).

Inside the Subdomain text input, type:

@ ← (just the at sign).

Next, in the Destination URL input box, type your domain name using the following format:

www.[your-domain].com

(Note: .com is used only for simplicity purposes, it can be .co, .edu, .org, etc.)

Click Add:

Step 3. Add custom resource records.

On the same configure DNS page in Google Domains, scroll down to the Custom resource records section.

Inside the first text input box, type:

www

Next, select CNAME from the dropdown menu (Skip the input labeled TTL, as its settings are automatically configured).

Inside the last text input paste in the DNS Target you copied from your Heroku application’s page (Note: Be sure to include the www).

Click Add.

Finally

Venture over to your URL and feast your eyes on your live application!