Add Custom Domain Names for Heroku Apps

Details
Written by  
Last Updated on 29 October 2021   |   Print  Email


By default, apps deployed on Heroku are publicly accessible via URLs like https://your-app-name.herokuapp.com. That’s good for internal use by development team. And of course, you want your end users/customers to access the apps via your own custom domain names like your-domain-name.com, instead of the default subdomains assigned by Heroku.

So in this Heroku tutorial, I’d like to share with you how to assign custom domain names for apps deployed on Heroku, with two cases: add a primary domain to an app; and add a subdomain to another app.

Here are the main steps:

  • Firstly, you need to purchase a domain name from a registrar such as NameCheap or Hostgator
  • Assign the domain name to your Heroku app using Heroku CLI
  • Configure DNS settings at your domain name service provider
  • Wait for DNS propagation completes

I suppose that you already purchased a domain name and have your app up and running on Heroku. Now, we’re going to add the domain name to your app.

 

1. Add Primary Domain to a Heroku App

Say you have an app named shopme-frontend, and a domain name shopme1.com. Login to Heroku CLI, and type the following command:

heroku domains:add shopme1.com –a shopme-frontend

The result of this command is something like this:

heroku add primary domain command

As you can see, Heroku instructs to configure your app’s DNS provider to point the given DNS target. Type the following command to see more details:

heroku domains –a shopme-frontend

This command lists all domains assigned to the app:

heroku domains command dns for primary domain

Notice the given values for DNS Record Type and DNS Target set for the custom domain. Now, login to your domain name registrar, to add a new DNS record as per the instruction.

I use NameCheap, so I add a new ALIAS record like this:

configure dns record alias for primary domain

Note that I put @ for the Host field and DNS target value for Value field. That’s done. Wait for a few minutes or an hour for the DNS propagation takes place. Then you will be able to access your app via the custom domain name shopme1.com.


2. Add Sub Domain to a Heroku App

Do similar steps to assign a subdomain, e.g. admin.shopme1.com to another app, e.g. shopme-admin. Type the following command to add this subdomain:

heroku domains:add admin.shopme1.com –a shopme-admin

And type this command to view the instruction in detailed:

heroku domains –a shopme-admin

The output would be like this:

heroku add subdomain command

Note that for a subdomain, the DNS Record Type is CNAME. So add a new DNS record in your domain name service provider like this:

configure dns record cname for subdomain

Note that I put admin (subdomain) for the Host field, and the given DNS Target for the Value field. And you’re all set. Just wait for a few minutes (or an hour) for the changes to take affect (DNS propagation completes).

That’s the tutorial for adding custom domain names (primary domain and subdomain) to apps deployed on Heroku. To see each step in action, I recommend you watch this video:

 

Other Heroku tutorials:


About the Author:

is certified Java programmer (SCJP and SCWCD). He began programming with Java back in the days of Java 1.4 and has been passionate about it ever since. You can connect with him on Facebook and watch his Java videos on YouTube.