How to add a custom domain to your Heroku app
Recently I was faced with the following scenario, one of our clients had it’s DNS hosted on Digital Ocean but the main app was hosted on Heroku. The landing page, on the other hand, was hosted on Hover, so we needed to add a link on the landing page that redirected to the main app.
As you should know, by default a Heroku app is available at it’s Heroku domain, which has the form [name of app].herokuapp.com. For example, an app named serene-example-4269 is hosted at serene-example-4269.herokuapp.com. So to make an app visible at a non-Heroku domain we need to add a custom domain to the app. Let’s see how we can accomplish this.
Adding custom domain on Heroku
We have two ways of adding a custom domain: using the Heroku CLI or using the Heroku Dashboard. The following instructions are using the Heroku Dashboard and I’ll leave the CLI for a future article.
Heroku Dashboard
Sign in to your Heroku Dashboard at https://dashboard.heroku.com/. After signing in, go to your App Settings page and locate the Domains Settings section:
Click on Add Domain and enter the custom domain that you want to add to your app on the side window that will pop up.
Be sure that you own this domain because you would need to add some DNS configuration after.
Click Next and copy the DNS target that Heroku provides, you will need it later.
Close this popup and you’ll see that your domain has been added.
It will take some time for Heroku to validate this domain and get an SSL certificate from Let’s Encrypt. Meanwhile, we could add our CNAME record on our DNS, in my case is managed by Digital Ocean.
Adding CNAME to Digital Ocean
Sign in to your Digital Ocean account and go to the Networking settings dashboard.
Click on your domain and you should see your DNS records.
Click on the CNAME tab an enter the hostname(the same that you add as a custom domain on Heroku) and the DNS target provided by Heroku on the field WILL DIRECT TO.
Click on Create Record and you should see the new record created.
That’s it, once Let’s Encrypt issues the SSL certificate requested by Heroku your new custom domain should work as expected. If you want to check if your certificate was issued go to this URL: https://crt.sh/?q=app.customdomain.com substituting app.customdomain.com for your domain.
It should take some time before you can access your new domain because the DNS records need to propagate on the DNS tree and Heroku should add the Let’s Encrypt SSL to your custom domain.
I hope this article was useful if you have any questions regarding Heroku or Digital Ocean please let me know by leaving a comment.
