Becoming a MERN Developer: Adding Custom Domain to Your Heroku Application

Introduction

Two days ago, I wrote a portfolio website for my roomate’s border collie, after that I figure why not go get a custom domain? So here comes this step-by-step tutorial of adding your custom domain to your web application deployed on Heorku.

Register a new domain

There are couple of domain providers outta there, and most of them also offers hosting or even website builder service, but we will go with freenom for now.

After you have registered your freenom account, go to the service section and select “Register a New Domain”.

Then search for the domain name you preferred. With .tk domain, you don’t need to pay a penny, but however, you can also scroll down and pick any other fancier domain you like.

Check out your new domain, and leave freenom for a while as we also got some work to do on heroku.

Adding domain to your Heroku app

Go to the setting tab of your heroku dashboard, scroll down and find the “Domain” section. Ignore the existing domain I already added, what we are going to do is add your newly registered domain here.

Now go for “Add dmain”, type down the new domain with “www”. And now we have finished all the work on heroku, let’s go back to freenom.

Go to “My domain” section and click the “Manage Domain”.

Now go to “Manage Freenom DNS” section and:

  1. Add “www” as Name

2. Change type to “CNAME”

3. Set the Target as your heroku app url (eg.appname.herokuapp.com)

Now wait a little bit for the propogation, if you are not a patient person try use dnschecker.org to check the propogation status as below, once its down,

Congratulations, now your website is up and runing on your new domain!