Pointing a domain to the Heroku app

When you create an app on Heroku, it can be accessed via Heroku Domain. For example, if you have built an app with the name ‘nctesting’, you can enter http://nctesting.herokuapp.com in a browser, and your website will be displayed.

It is also possible to make your app accessible via a custom domain that you have registered with Namecheap. You can add custom domains to both free and paid Heroku accounts.

If you wish to accomplish this, you’ve come to the right place - this guide is what you need.

Domains can be inspected and managed using either Heroku CLI  or Dashboard.

1. First of all, preconfigure your Heroku app to be used with your custom domain.

Deploy your app and make sure it is working via your Heroku subdomain: example.herokuapp.com. If you are having difficulties deploying your Heroku app, feel free to refer to Heroku documentation.

2.Verify your Heroku account by adding a credit card to it:  

- Click on Account Settings at the top:




- Select the Billing tab at the top and click on the Add Credit Card button:



3. Once the account is verified, you will be able to add a custom domain following these steps:

- Select Dashboard at the top. Then click on your application name:



- Click on the Settings tab and then click on the Add domain button:




4. Now let's decide what you want to be displayed in the URL after the setup. You can have it like:
a) www.yourdomain.tld
b) app.yourdomain.tld or any other subdomain
c) *.yourdomain.tld (a wildcard)

Depending on the domain you select, your domain's settings will be adjusted.

(a) www.yourdomain.tld

Enter your domain name in the format www.yourdomain.tld and click on Save changes:



In the cases (b) app.yourdomain.tld and (c) *.yourdomain.tld enter your domain name in the format app.yourdomain.tld or *.yourdomain.tld correspondingly.

Once this is done, you will see your custom domain displayed in the Domains section.

NOTE: If you skip this step and proceed with the next one right away, the following error page will be displayed in the browser:



5. Now you can start configuring your domain from Namecheap's side if it is using our BasicDNS, BackupDNS, PremiumDNS or FreeDNS.

Just follow the steps below in order to do this:

- Sign into your Namecheap account.

- Select Domain List from the left side menu and click on the Manage button next to your domain:




- Click on the Advanced DNS tab and find the Host records section, then click on the Add New Record button (not able to edit Host Records?):




In this section, you need to create several host records for your domain depending on a subdomain you would like to use for the Heroku app:


(a) To use www.yourdomain.tld, the following host records should be created:

URL Redirect Record for @ to forward to http://www.[yourdomain.tld]
CNAME Record for www mapped to your Heroku Domain [name of app].herokuapp.com




(b) To use any other subdomain, like app.yourdomain.tld, you should create the following records:

URL Redirect Record for @ to forward to http://app.[yourdomain.tld]
CNAME Record for the app mapped to your Heroku Domain [name of app].herokuapp.com



NOTE: You can replace the app with any subdomain that you like.


(c) To use *.yourdomain.tld, the following host records should be created:

URL Redirect Record for @ to forward to http://www.[yourdomain.tld]
CNAME Record for * mapped to your Heroku Domain [name of app].herokuapp.com




Once all the details are inserted, save them using the Save all changes button. It may take up to 30 minutes for the changes to come into effect.


6. Make sure that there are no conflicting records set for the same host.

If there are any conflicting records, please remove them. You need to pay attention to the records of the following types: URL Redirect (Unmasked/Masked/Permanent Redirect), A or CNAME. For example, you need to check if you might have such records as URL redirect and CNAME for the default parking page.

Here is an example of conflicting host records:





That's it!

If you have any questions, feel free to contact our Support Team.

Comments

We welcome your comments, questions, corrections and additional information relating to this article. Your comments may take some time to appear. Please be aware that off-topic comments will be deleted.

If you need specific help with your account, feel free to contact our Support Team. Thank you.

Need help? We're always here for you.

× Close