DEV Community

Cover image for How to connect GoDaddy domain with Heroku and Cloudflare
Evgeni Sautin
Evgeni Sautin

Posted on

How to connect GoDaddy domain with Heroku and Cloudflare

Well, if you (as me just recently) struggle to connect newly registered domain from GoDaddy with your app at Heroku, and in addition would like to use advantages of Cloudflare – this article is for you 🎯

Though you can find some useful information on the web, nothing worked for me out of the box and since I don't do this procedure on a daily basis, it wasn't obvious where is the mistake. Hope it will help you and without many words, let's jump in!


Sections

👉 Heroku settings
👉 Cloudflare settings
👉 GoDaddy settings


Heroku

Step 1: Go to your app's settings on Heroku.

Heroku - Settings

Step 2: Scroll down to the domains section and click "Add domain".

Heroku - Domains

Step 3: Enter your domain name that you've got from GoDaddy and click "Next".

Heroku - Domain Name

After clicking "Next" you'll be given a "DNS target" record that you need in the next steps.


Cloudflare

Step 1: Go to the "DNS" tab of your site and click "Add record" in DNS management section.

Cloudflare - DNS Section

Step 2: Enter two CNAME records. First has the name of your domain and target – is your "DNS target" record from last step at Heroku. Second CNAME record must have the name of www and the same targer record from Heroku. In order to finish with this tab, copy provided nameservers as you gonna need them soon.

Cloudflare - DNS Records

Step 3: Go to the "Page Rules" tab and let's add redirect from www address to the main clean one. For example, in my case www.skillhunter.app redirects to skillhunter.app. Pay attention to asterisk (*) character in the first record and trailing $1 in the last one.

Cloudflare - Page Rules


GoDaddy

Step 1: From your product's page click on "DNS" related to your domain.

GoDaddy - Products Page

Step 2: Now you should see DNS records similar to the following.

GoDaddy - DNS Management

Step 3: Scroll down to the Nameservers section and click "Change".

GoDaddy - Change Nameservers

Step 4: Click the phrase "Enter my own nameservers (advanced)".

GoDaddy - Enter Nameservers

Step 5: Enter the nameservers, that you've copied at step 2 of Cloudflare settings and click "Save".

GoDaddy - Save Entered Nameservers


Congrats 🎉

You did it! Just don't forget to wait, as DNS records update may take up to 72 hours.


Last but not least, big shout out to Clint Adair from Unsplash for cover photo!

Top comments (17)

Collapse
 
marinzaimov profile image
Marin Zaimov • Edited

Thanks for this article!

I've copied the config 1:1 and I'm running into issues. Perhaps there have been changes to the apps that would cause this since you wrote this up.
Seems the name servers are accurate, but that's where it ends. The CNAME records are not being respected and I'm not sure why. Any help would be appreciated.
zone.vision/#/beastbike.fit

Trying to upload an image of Cloudflare config, but it's failing. Looks identical to yours.
It has been about 60 hours since I made all the config changes.

Collapse
 
marinzaimov profile image
Marin Zaimov

Seems after being logged out of cloudflare after a few days, upon logging in I was presented with a getting started UI, which allowed me to complete the setup.

Collapse
 
tonyxdz profile image
TonyxDz

thanks , im just wondering if it's free to use cloudflare in this situation

Collapse
 
spyker77 profile image
Evgeni Sautin

Good question! Had to check it, just in case 🕵️
Phew, so far there is no bills. I guess you would be notified if you accidentally switch something on or exceed the limit, and even then it is quite explicit. For example, on the Rules tab I see "You have 2 Page Rules left. Buy More Page Rules." or "Upgrade to Business" button in the Custom Nameservers section – so you wouldn't have missed it.

Collapse
 
tonyxdz profile image
TonyxDz

thank you so much 🙏🏻 i don't have a lot of info about DNS and networking in general and this is why i got confused 😵

Thread Thread
 
spyker77 profile image
Evgeni Sautin

My pleasure 👍
If you have any further questions, don't hesitate to ask!

Collapse
 
luboho profile image
Luboho

Thanks for hepful tutorial. What if backend and frontend are separate? Both hosted on Heroku. Same steps, just add DNS targets from Heroku to Cloudflare as CNAMEs?

Collapse
 
spyker77 profile image
Evgeni Sautin

Hi Luboho!

Since I haven't done this myself, I will improvise in this answer and further explorations is needed. But from my understanding, you have basically 2 different apps running on Heroku. Frontend is the first one and accessed by publicly available URL, and backend is the second one to which frontend communicates after receiving the initial request from the end user.

Simplified version looks like this (requests and responses follow the same chain):

User -> Cloudflare -> Frontend -> Backend

In this case, the communication between frontend and backend reminds me of Amazon VPC. So, the frontend works like a gateway, thus only this app needs to be configured to use Cloudflare.

Actually, writing this made me realise that this topic might deserve its own article, so please don't forget to share your findings 😉

Collapse
 
luboho profile image
Luboho

Thanks for reply. I will share findings if I will figure it out.

Collapse
 
jayarghargh profile image
Justin R

this is great thanks mate, simple and works!

Collapse
 
spyker77 profile image
Evgeni Sautin

Glad to hear that it works 😊

Collapse
 
kwameaj67 profile image
Kwame Agyenim-Boateng

After you set custom Nameservers, is that the final process to host your site??

Collapse
 
spyker77 profile image
Evgeni Sautin

Yep, as far as I remember... But perhaps I could help if you provide a bit more information: how long did you wait after completing configuration, the type of error you have while reaching your website or a specific domain, so that we can compare the exposed settings here zone.vision/#/skillhunter.app for example?

Collapse
 
jcinco profile image
Jake

What's the advantage of using cloudflare vs just directly from Godaddy to Heroku?

Collapse
 
spyker77 profile image
Evgeni Sautin

Well, in the first case, you get the benefits that stem from the core nature of Coudflare: it sits on the edge and thus handles all the traffic entering your application. Here are just a few of the features from the official Coudflare website:

  • Security (firewall, DDoS protection, rate limiting, bot management, VPN, and more)
  • Performance (intelligent routing, mobile & image optimisation, video, cache)
  • Reliability (load balancing, DNS, virtual backbone)

I'd really encourage you to spend some time learning about this technology.

Collapse
 
mig profile image
Miguel Cortez • Edited

Thank you so much, Evgeni! This article helped me a lot. You did a great job!

Collapse
 
spyker77 profile image
Evgeni Sautin

Awesome! Hope you have a lot of fun there 😜