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.
Step 2: Scroll down to the domains section and click "Add domain".
Step 3: Enter your domain name that you've got from GoDaddy and click "Next".
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.
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.
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.
GoDaddy
Step 1: From your product's page click on "DNS" related to your domain.
Step 2: Now you should see DNS records similar to the following.
Step 3: Scroll down to the Nameservers section and click "Change".
Step 4: Click the phrase "Enter my own nameservers (advanced)".
Step 5: Enter the nameservers, that you've copied at step 2 of Cloudflare settings and click "Save".
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)
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.
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.
thanks , im just wondering if it's free to use cloudflare in this situation
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.
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 😵
My pleasure 👍
If you have any further questions, don't hesitate to ask!
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?
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 😉
Thanks for reply. I will share findings if I will figure it out.
this is great thanks mate, simple and works!
Glad to hear that it works 😊
After you set custom Nameservers, is that the final process to host your site??
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?
What's the advantage of using cloudflare vs just directly from Godaddy to Heroku?
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:
I'd really encourage you to spend some time learning about this technology.
Thank you so much, Evgeni! This article helped me a lot. You did a great job!
Awesome! Hope you have a lot of fun there 😜