Custom Domains for Heroku Apps
While looking around my app’s settings on the Heroku website, I noticed the option to add a custom domain to the app FOR FREE. I thought that was pretty awesome. Heroku needs a credit card on file in order for you to create custom domains, but they don’t actually charge anything to add a custom domain.
After adding a custom domain to my app, I quickly found out that this free domain wasn’t what I thought. I hadn’t found a loophole to purchasing a website domain. This option on Heroku lets you use a custom domain that you’ve already purchased from a domain registrar like Namecheap. Using this custom domain requires some configuration/cooperation, and I’ll show you exactly how I set up a custom domain to redirect to my Heroku app.
Purchasing the Domain
First, I purchased the domain that I wanted to use for my web app through Namecheap.
I searched my desired name. Since it was available, Namecheap provided purchasing options. I selected and paid for a “.com” address. It cost $8.88/year before taxes or fees. Once I knew my domain name, I could start to configure my Heroku app to use it.
Two Ways to Add Domains to Heroku Apps
I had two ways of adding a custom domain to my Heroku app. Initially, I added a domain from the Heroku website. Once I did that successfully, I added the same domain from the CLI to make sure both methods worked.
Adding Domains from the Website
I logged into my Heroku account on the website and opened the app I would add a custom domain to. I clicked the “Settings” tab and scrolled down to the “Domains” section. I clicked the “Add domain” button, which prompted a popup window. I typed the purchased domain name in the appropriate box and clicked the “Next” button at the bottom. It updated the window with a DNS target string under my domain name. This DNS Target is important, but it will remain available to us on the “Settings” page.
Adding Domains from the CLI
Just to be sure I could, I did the exact same thing from the command line. In my terminal, I went into my app and logged into my heroku account with the command heroku login, which prompted the browser to open so I could connect the command line with my Heroku account. Once logged in from the command line, I entered heroku domains:add www.choowatchin.com. Then I entered heroku domains:wait to make sure the domain had been successfully added to the app. Finally I entered heroku domains so I could see my newly added domain with the corresponding DNS Target, which is important for the next step.
Configure Domain Registrar with Heroku App Using DNS Target
Finally, I went back to Namecheap to add the DNS Target from the Heroku app to my newly purchased domain. After logging in, I selected the “Account” tab in the navbar, which directed me to the “Dashboard” page. I clicked the “Manage” button to the right of my domain, and found myself in the domain’s “Details” page. Next, I selected the “Advanced DNS” tab and added a new record in the “Host Records” section. The record details are as follows:
- Type = “ALIAS Record”
- Host = “www”
- Value = {DNS Target}
- TTL = “Automatic”
Copy and paste the DNS Target from either the app’s Settings page on the Heroku website or the CLI after entering heroku domains. (Note: Please make sure the “Value” you enter in your ALIAS record matches the DNS Target from your Heroku app. This value does not match in my example gifs and screenshots, because I added this domain multiple times and the DNS Target changes when you add a new domain)
Before, my app was only accessible through a randomly generated, Heroku branded url (https://protected-tor-44426.herokuapp.com/). While it’s still accessible through that url, my users can now also access it through the url of my choosing (http://www.choowatchin.com/). If you follow my steps in this blog and are willing to fork over just under ten bucks a year, you can give your Heroku app its own custom domain.
