Part 1 — How to redirect your domain to your Heroku App (Using PointDNS)

byBeimnet Zewduon Jan 5, 2022

Web Development

Once we finish writing the code and organizing the necessary files that would make up our website, we need to put it all or deploy everything online so people can find and use our website. This can be done in many different ways.

What are the options?

To have more control over their settings and other aspects of their website, most people and developers may choose to buy a domain name along with web hosting from shared hosting service providers, such as GoDaddy.

In our local market here in Ethiopia, we have shared hosting providers such as Yegara Host, Ethio-Telecom, and HahuCloud, to mention a few. These providers give us our desired domain name (if it’s available — not taken by anyone else), and a web hosting (disk space) allocated to us depending on our needs and based on the size of the files (an increase in our desired size will also increase the payment) we would want to upload and have our content for publishing and make it available for everyone.

We can buy both of the following as a bundle from one provider or we can also buy the domain name only and then buy the web hosting from somewhere else.

Web hosting is rented file space on a hosting company’s web server. You put website files on the web server. The web server provides website content to website visitors.
A domain name is a unique address where people find your websites, such as http://www.mozilla.org or http://www.bbc.co.uk. You can rent your domain name from a domain registrar for as many years as you want.

Many professional websites go online this way.

We can also choose other hosting services such as Heroku, Netlify, Elastic Beanstalk (AWS), Google App Engine, and Firebase to name a few.

Heroku and Netlify have a free tier so we can deploy our website and buy a domain name and link it to the domain name we bought from hosting service providers.

If we are developing React, Node, TypeScript, etc. websites and apps and would want to deploy them, then, we choose to buy a domain name and web hosting we can design and develop our website and create the necessary files to be hosted on the domain we bought from one of the shared hosting services. We can do this by Creating a Production Build. After the build finishes, we can upload those files on our shared hosting server and make sure that index.html is at the root of where our server is expecting the root to be and our app should be live.

But if we choose to buy only the domain name and deploy our website to websites like Heroku and Netlify then we will have to redirect traffic from our domain name to our Heroku app so that people can access our website, otherwise, we will see an error as follows because there is no data being sent to our domain name.

So, we are going to see how we can redirect our Heroku Application to the domain name we bought.

We can do these in many ways, but I will show you two methods. This post will cover how we can redirect your domain to your Heroku app using Heroku's inbuilt add-on PointDNS and in the next post, we will see how we can do the same thing using a service called Cloudflare.

Redirect your domain to your Heroku App (Using PointDNS)

We are going to see this step-by-step.

First, let’s go to Heroku and log in to our account. If you do not have a Heroku account then head up to the Signup Page of Heroku and fill in the required fields and signup.

If this is the first creating a Heroku account then, after finishing the signup process you will be redirected to a dashboard as follows:

But, if you already have an account and have a few apps running already then, you should see something like this:

Step 1 — Create a new Heroku app / Use your existing one

For the purpose of this article, I am using (yourdomain.com) as an example, you should replace it with your domain name.

To point to your root domain, you will need to log in to Heroku and create a new app. Alternatively, you can create your new app on the command line with heroku create yourdomain.

Step 2 — Add your custom domain name to Heroku

Now, let’s add our custom domain, by navigating to the settings inside Heroku, and adding both, www.yourdomain.com and yourdomain.com.

Or we can also use the command-line to add your domain using this command: heroku domains: add yourdomain.com www.yourdomain.com

After that, we can scroll down and find something like this:

Now we need to install an add-on named PointDNS.

Step 3 — Install the PointDNS add-on

Now we will need to install the PointDNS add-on. This add-on is free but you will need to have a credit card on file with Heroku. To install this add-on, navigate to your app on Heroku and click on the overview link and click Configure Add-ons and then click on Find more add-ons. Here you can search for PointDNS and provision the add-on.