How to associate Heroku app with a Google domain? - heroku

Question

I purchased a domain with Google and I would like to associate it with a Heroku app. What is the step-by-step process to achieve that?

Answer 1

I recently connected my app to a custom domain. Although my domain is purchased from AWS route53. I think the approach generally is the same.
First of all, you can check out this page written by Heroku. https://devcenter.heroku.com/articles/custom-domains
I believe the tutorial given by Heroku works. However, I am tired of all those CLI that make things unvisable XD. Luckily, we can configure it from the Heroku website instead of the CLI.
Here is my approach:
First open your app in the Heroku web page, then click the "Settings" button
https://dashboard.heroku.com/apps/{your app name}
Scroll down until you see the "Domains" section, Then click "Add domain"
https://dashboard.heroku.com/apps/{your app name}/settings
Input the domain name you purchased from google (eg. www.example.com)
After adding your domain, Heroku will give you the DNS target.
From your google domain DNS management page, you should be able to add a new record for your hosted zone.
Finally, add a new record with simple routing policy, type CNAME, and value equals to the DNS target provided by Heroku.
It is really simple if you follow these steps correctly. Due to my reputation level, I cannot upload photos. Feel free to contact me if you want some image to guide you how to locate the buttons :)

Answer 2

It’s only 3 steps:
1. Heroku, in your app > Settings > Add your domain:
Add www.[foo.com] (Note: www is KEY!) to your app
Copy the [DNS Target] it gives you
2.Google Domains > DNS > Resource records > Custom Records > Manage Custom Records:
www, CNAME, [DNS Target]
Now you’re basically set up. If someone goes to https://www.[foo.com] in a few minutes, they’ll see your Heroku app hosted at [DNS Target]. But if they go to any other permutation (http, non-www) they’ll get a 404 error. To solve this, we’ll set up permanent redirects to the main version in the next step.
Google Domains > Website > Add a Forwarding Address:
From Field: [foo.com]
To Field: https://www.[foo.com]
Permanent Redirect (301)
Forward Path (so that [foo.com]/about forwards to https://www.[foo.com]/about)
SSL Enabled
Boom. Wait a couple of minutes for DNS to catch up, and you’re done.
heroku certs:auto:refresh
In Terminal refresh the SSL cert settings on Heroku, and check the Heroku Dashboard to confirm everything’s working.
Confirm all the below permutations forward to your site correctly:
https:
https://www.[foo.com]
https://[foo.com]
http:
http://www.[foo.com]
http://[foo.com]
paths:
https://www.[foo.com]/about
http://[foo.com]/about
PS: So does this work for the naked domain like [foo.com] instead of www.[foo.com]? No! Google Domains does not support ALIAS domains, and therefore in combination with Heroku does not support forwarding to the naked (aka. root aka. apex) domain. Sorry! This surprised me too :( Source 1: Heroku Docs | Source 2: StackOverflow. Your only alternative here is to transfer your domain (which costs money) to something like Cloudflare.
A working answer with these explanations is taken from https://nikodunk.com/heroku-ssl-google-domains-2019/

Answer 3

Just to add to Fergus's answer, if you are seeing the warning "cant add cname records as root domain" add www to the host name input.