Part 2 — How to redirect your domain to your Heroku App (Using Cloudflare)

byBeimnet Zewduon Jan 29, 2022

Web Development

In a previous post, we saw how we can redirect our Heroku app to our domain using PointDNS and in this post, we will see, how we can redirect our app to our domain using Cloudflare.

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 this article, I am using (yourdomain.com) as an example.

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:

Here we can see that when we added there are two DNS targets that I circled in green, we will need this later on so copy and save it somewhere.

Step 3 — Go to Cloudflare and create an account

Now we need to create a Cloudflare account. If you already have one then, just log in to your account.

Once you sign up and log in for the first time, you should see something like this. Now select Cloudflare (Protect your Internet presence)the one that has a green circle around it.

Once you select, that you will see something like this

Now, add the domain name you would want, in my case, I will add yourdomain.com. The next thing you will see will be this:

Now you can choose, the Free plan and press Continue. Then it will check if there are any existing DNS records:

If it has found any DNS records it will be displayed here if not it will be empty, scroll to the bottom and press continue again.

It will bring you to change your name servers keep everything as is and press continue.

Now go to the DNS from the left menu:

Now on the DNS Management tab at the top and press the Add record, button and you should see something like this:

For Type: Choose CNAME

For Name: Type in your domain name.com (For example in my case I typed in beimnetzewdu.com)

For IPv4 address: Paste in the DNS Target you have copied from Heroku. When pasting the IPv4 address make sure that the DNS Target you copy from Heroku is from domainname.com and not www.domainname.com. Then press Save. It should look something like this:

Now, Repeat the process for the www. domain name.com

For Type: Choose CNAME

For Name: Type in www

For IPv4 address: Paste in the DNS Target you have copied from Heroku. When pasting the IPv4 address make sure that the DNS Target you copy from Heroku is from www.domain name.com. Then press Save. It should look something like this:

You will be redirected to SSL/TLS setting. For the SSL encryption mode. it is recommended to use Full or Full (strict). But we can Choose Flexiable.

Do not forget to enable Always use HTTPS configuration to make your domain redirect to https:// if somebody access your website using http://

Head to Edge Certificates and allow Always Use HTTPS:

Now we are going to scroll down a bit and find Cloudflare Nameservers

There should be two nameservers given, copy those, and we will add them to our domain registrar website. In my case it Yegara, so I will log in and show you:

Here you can see I have added the Cloudflare Name servers in my DNS Settings, then click on UPDATE NAME SERVER.

We will have to wait a few minutes to hours and it will work, your site will be live and That’s It.

Bonus: We can add subdomains the same way:

Login to your Heroku and select the website you would want to be the subdomain of the website you just added to Cloudflare, I will show you by adding Amharic Wordle (you should check it out if you haven’t already 😁). Head to your setting tab and scroll down to Domains:

Then click Add domain, and then add subdomain.domainname.com, In my case, I added amharicwordle.yourdomain.com. Now copy the DNS Target again and head back to Cloudflare and head to DNS Settings and again press the Add record button:

For Type: Choose CNAME

For Name: Type in the subdomain

For IPv4 address: Paste in the DNS Target you have copied from Heroku. When pasting the IPv4 address make sure that the DNS Target you copy from Heroku is from sudomain.domainname.com. Then press Save. It should look something like this: