Your ultimate guide to Heroku custom domain name

Are you looking for a quick yet easy guide on setting up your preferred custom domain name to your Heroku application or website?

This how-to tutorial is going to be your ultimate friend for you!
Yes!
Believe me, the method explained here in this blog post is the most convenient, quick and easy way of adding a custom domain to your Heroku app.

Wondering how this method could be the easiest?
It is because we will be using the Heroku’s app settings to add the custom domain instead of going through the CLI – meaning through the command line. No need to use terminal for this.

And one more thing I need to mention here is, before writing this blog, I published a video on YouTube on this exact same topic and over 50,000 people have already watched it and a lot of people have commented this method to be very helpful for them. You might want to check this out.

How to add a custom domain name to my Heroku app?

There is one important step which needs to be done so that Heroku can allow us to add domain names to our account.
It is verifying our Heroku account.

First: verify your Heroku account

Verifying Heroku account is easier than you think!

  • Just go to your account settings: https://dashboard.heroku.com/account/billing
  • Add a payment method/ credit card in the billing information
  • adding a payment method is just for verification and you won’t be charged*
  • in case you are charged $1 which is just for the verification, it will get automatically refunded later

To find out more about account verification, charges and how to unverify your Heroku account please visit this page.

Adding custom domain to Heroku app

I have found we can add domain names to the apps in Heroku in two major ways:

Using the Command Line Interface (CLI)

Domain names can be easily added to the Heroku apps via command-line using terminal or similar CLI applications.

Please check this official Heroku guide on using CLI for domain names.

In this guide, I will be talking about adding domain name by using the Heroku’s online dashboard – which is personally my favourite and preferred method.

Using the Heroku’s online dashboard

Okay, let us get started with adding domain name to your Heroku application.

Time needed: 2 minutes.

  1. Login into your account

    First things first, login to your heroku account. You can skip this step if you are already logged in.

  2. Select your Heroku app from the dashboard list

    Now, we need to choose the app for which we will be applying the domain name. Just clicking on your app name will take you to the app page.heroku app select for custom domain name

  3. Go to your app’s settings

    Once your app’s dashboard is opened, if you look at the right you’ll see Settings tab, underlined below in green.heroku app settings tab f

  4. Scroll down to find domain settings

    In the Settings, please scroll down until you find domains section where you can see the current live URL of your app.heroku custom domain settings

  5. Tap on Add domain and add your preferred domain name and submit by pressing next

    To add a domain press on Add domain button and hit Next to continue.provide domain name

  6. Copy the DNS target

    dns target for heroku domain

  7. Add the DNS target to your domain settings

    After you have copied the DNS target for your Heroku app, go to your domain registrar settings like your Namecheap, Godaddy account dashboard and open up the DNS settings page from where you can add and manage DNS like CNAME, A records etc.
    In my case, I am adding via Cloudflare. You can add the DNS target as CNAME or as an A record.
    You can specify the lowest TTL available to make DNS propagation quicker.dns settings for heroku domain

  8. DNS propagation may take some time

    For the DNS changes to work, it might take some time.

Please visit https://devcenter.heroku.com/articles/custom-domains#configuring-dns-for-root-domains for more on Custom Domains.

After some time you will notice that your Heroku custom domain name is working well and your domain is pointing towards the Heroku app.

What if I am getting an SSL error?

But you might be wondering at this stage that why your browser is still showing error to access your website saying unsecured connection – even though you can fully access the website without HTTPS.

There is a quick fix around this HTTPS scenario – using SSL certificates.

While you can fix easily by installing the SSL certificates – here again is another part to this:

  • you can use your own/ free SSL certificates (called Manual Certificates) on Heroku apps but you need to be on paid Heroku plans (hobby and) as Heroku restricts the use of external SSLs to free accounts
  • or you can use the Heroku’s Automatic Certificate Management which is again available to paid users only

So what is the solution if you are just trying around or want to install an SSL certificate on your Heroku app without paying?
– The answer is Cloudflare!

Using Cloudflare’s free SSL with Heroku custom domain

To use Cloudflare’s free SSL service with your Heroku application, first sign up to Cloudflare and add your website. Once your website has been added to your Cloudflare account please follow the following steps:

  • Go to SSL/ TLS settings tab and set the encryption mode to flexible
    The reason for setting to flexible is self-explanatory.
  • Now go to Edge Certificates tab and turn on Always Use HTTPS option
  • It might take some time for the SSL setting to work.