In one of our previous tutorials, we showed you how to deploy an application to Heroku. In this tutorial, we will show you how to configuring a custom domain for you newly deployed application!

First, we will need to register a custom domain. There are many domain registration companies that offer this service (for example GoDaddy, HostGator, etc.). The one we will be using in this tutorial is Google Domains. However, the steps below can be applied to any other registrars.

From your Heroku application’s dashboard, select the

tab. On the settings page, navigate to the 

 button. Next, enter your domain into the prompt, like so:

Once you’ve added your domain, copy the 

 provided by Heroku. You will need to provide this to your domain registrar in the following step.

Next, you will need to tell your domain registrar that your application is running at this exact DNS target provided by Heroku. To do this, go to your domain registrar's dashboard and create what is known as a 

 from the drop-down. Skip the input labelled 

You should get something that looks like this:

If you try to access your application using your custom domain, 

 into your browser, you are automatically redirected to 

To replicate this behaviour, you will need to setup a subdomain forward! Here is how it's done in Google Domains.

. And you should get something that looks like this:

And that is it. You should be able to access your application using both 

Hopefully you have found this interesting & helpful. If you would like to see how this is integrated into a fullstack application created using React, GraphQL, Node, and TypeScript, checkout our 

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Adding Custom Domains to Heroku</h1><p>In one of our previous tutorials, we showed you how to deploy an application to Heroku. In this tutorial, we will show you how to configuring a custom domain for you newly deployed application!</p><h2><a name="step-1-register-a-custom-domain" id="step-1-register-a-custom-domain">Step 1 - Register a Custom Domain</a></h2><p>First, we will need to register a custom domain. There are many domain registration companies that offer this service (for example GoDaddy, HostGator, etc.). The one we will be using in this tutorial is Google Domains. However, the steps below can be applied to any other registrars.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201218215628564_1.png" attachmentid="7660c7dd-eadb-4321-bd6c-34ab81fee840" data-width="1456" data-height="1600" contenteditable="false"><div></div></figure><p></p><h2><a name="step-2-add-your-domain-to-heroku" id="step-2-add-your-domain-to-heroku">Step 2 - Add Your Domain to Heroku</a></h2><p>From your Heroku application’s dashboard, select&nbsp;the<strong>&nbsp;<em>Settings</em>&nbsp;</strong>tab. On the settings page, navigate to the&nbsp;<strong><em>Domains</em></strong>&nbsp;section and click the&nbsp;<strong><em>Add domain</em></strong>&nbsp;button. Next, enter your domain into the prompt, like so:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-oLDMF" id="cm-oLDMF">www.your-domain.com</textarea><p>Note: the&nbsp;<code>www</code>&nbsp;characters are required!</p><p>Once you’ve added your domain, copy the&nbsp;<strong><em>DNS Target</em></strong>&nbsp;provided by Heroku. You will need to provide this to your domain registrar in the following step.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201218215659126_2.png" attachmentid="f095ae07-43ac-4221-9574-b991cee05484" data-width="1643" data-height="427" contenteditable="false"><div></div></figure><p></p><h2><a name="step-3-configure-dns-settings" id="step-3-configure-dns-settings">Step 3 - Configure DNS Settings</a></h2><p>Next, you will need to tell your domain registrar that your application is running at this exact DNS target provided by Heroku. To do this, go to your domain registrar's dashboard and create what is known as a&nbsp;<code>CNAME</code>&nbsp;record.</p><p>Here is how it's done in Google Domains.</p><p>On the&nbsp;<strong><em>DNS</em></strong>&nbsp;page, scroll to the&nbsp;<strong><em>Custom resource records</em></strong>&nbsp;section.</p><p>Enter&nbsp;<code>www</code>&nbsp;inside the first input. Next, select&nbsp;<code>CNAME</code>&nbsp;from the drop-down. Skip the input labelled&nbsp;<code>TTL</code>. Inside the last input, paste in the&nbsp;<strong><em>DNS Target</em></strong>&nbsp;from Heroku. Click&nbsp;<strong><em>Add</em></strong>.</p><p>You should get something that looks like this:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201218215725118_3.png" attachmentid="11018eb4-d655-4e8e-81b8-96b66d1fca86" data-width="2060" data-height="662" contenteditable="false"><div></div></figure><p></p><h2><a name="step-4-subdomain-forwarding" id="step-4-subdomain-forwarding">Step 4 - Subdomain Forwarding</a></h2><p>Just one last step to complete!</p><p>If you try to access your application using your custom domain,&nbsp;<code>www.your-domain.com</code>&nbsp;works, but&nbsp;<code>your-domain.com</code>&nbsp;does not.</p><p>However, when you enter&nbsp;<code>google.com</code>&nbsp;into your browser, you are automatically redirected to&nbsp;<code>https://www.google.com</code>. Similarly, when you enter&nbsp;<code>youtube.com</code>&nbsp;into your browser, you are automatically redirected to&nbsp;<code>https://www.youtube.com</code>.</p><p>To replicate this behaviour, you will need to setup a subdomain forward! Here is how it's done in Google Domains.</p><p>On the&nbsp;<strong><em>DNS</em>&nbsp;page</strong>, scroll to the&nbsp;<strong><em>Synthetic records</em></strong>&nbsp;section.</p><p>Select&nbsp;<strong><em>Subdomain forward</em></strong>&nbsp;from drop-down menu. Inside the&nbsp;<code>Subdomain</code>&nbsp;input, enter the "at" symbol:&nbsp;<code>@</code>. Next, in the&nbsp;<code>Destination URL</code>&nbsp;input, type your domain name like so:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-bhz8L" id="cm-bhz8L">www.your-domain.com</textarea><p>Click&nbsp;<strong><em>Add</em></strong>. And you should get something that looks like this:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201218215831343_4.png" attachmentid="6115a67d-9c34-4563-8e6d-19b58ea08b41" data-width="2051" data-height="691" contenteditable="false"><div></div></figure><p></p><p>And that is it. You should be able to access your application using both&nbsp;<code>www.your-domain.com</code>&nbsp;and&nbsp;<code>your-domain.com</code>!!!</p><p>Hopefully you have found this interesting &amp; helpful. If you would like to see how this is integrated into a fullstack application created using React, GraphQL, Node, and TypeScript, checkout our <a href="https://www.newline.co/tinyhouse" rel="noopener noreferrer nofollow">TinyHouse Masterclass</a>.</p><p></p>

AUTHOR

Jing Chen

In one of our previous tutorials, we showed you how to deploy an application to Heroku. In this tutorial, we will show you how to configuring a custom domain for you newly deployed application! First, we will need to register a custom domain. There are many domain registration companies that offer…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Adding Custom Domains to Heroku

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript