How do I point my domain name from hostgator to heroku - django

Question

I'm trying to point my hostgator domain name to my heroku app, but I keep getting the error when I try to manage my domain names.
An error occurred. Please verify the validity of your nameservers and try again.
I've already added the domain name to heroku in the sites dashboard > settings. My app is free, I'm ready to move up and pay for the full version. I've been figuring some things out and I am ready to deploy. And to do this I have to point my domain name to heroku. I know I'm missing something. I've read the docs already, a lot, But it's not all the way clear. I know it's something simple I'm missing. Thanks in advance
EDIT. I don't want my domain to be a subdoamain. I want it to be the main domain. because you can't monetize a site that is a subdomain.
EDIT to be clear I want the domain name mysite.com from hostgator to be used with my heroku app. So when I type mysite.com my heroku app appears. I want my heroku app to go from this
mysite.herokuapp.com
to this
mysite.com
and I do not want it to be a subdomain

Answer 1

I'm going to outline two approaches here. One works if you still have cpanel because you're paying for hosting with HostGator. (That makes no sense if you're using Heroku for hosting, so it's not a long term solution.) The other works if you just have a domain registered with HostGator and theoretically in either case.
Either way, do this:
heroku domains:add www.mysite.com
heroku domains:wait 'www.mysite.com'
1) If you have hosting with HostGator
Log into your HostGator cpanel interface at mysite.com/cpanel. Scroll down to Domains and open up the Advanced Zone Editor (click the link). You're not going to add a record. Instead, you're going to change one that's already there. Find the record with the name "www.mysite.com." (it has a period at the end) with the type CNAME. Click Edit. Change the CNAME field to the DNS target heroku gives you when you type heroku domains or scroll down to Domains And Certificates under Settings in your Heroku dashboard. Mine looks like www.mysite.com.herokudns.com. Finalize the change.
Visit www.mysite.com. Please put www in the url. www must be in the url. This should now point to your Heroku site. Perhaps you will see a 400 (bad request) error. This might be because your backend isn't allowing Heroku as a host. If you have a Django app, for example, that's not in debug mode (you should set DEBUG to False for security reasons), you must also set the ALLOWED_HOSTS list in settings.py to include 'www.mysite.com'. Otherwise you'll get 400 errors when you try to access the site from the www.mysite.com domain.
The end result is that www.mysite.com points where you want it to, and so will www.mysite.com/some_page.
But what if a user types in only "mysite.com"? They'll be directed to your HostGator site. A simple solution is to go to the CPanel's Redirects section, also under Domains, and make a permanent redirect from your domain (leaving the textbox that starts with "/" blank) to http://(((www.mysite.com/))) [StackOverflow won't let me put it in without something like parentheses there.] All this does is force "www" to appear in the URL even when the user doesn't type it.
Now, whatever the user types in, they'll end up at your Heroku site. I don't mind having a "www" hanging out in the URL box, so this works for me.
2) If you don't have hosting with HostGator, just ditched it, or simply don't like the company (quite understandable)
If you don't have HostGator hosting or ditched it, you probably can't access the cpanel stuff. First, add the domain as shown at the top. Now install the PointDNS add-on for Heroku. It automatically syncs with your custom domains (even after you install it). So when you open up PointDNS in the Heroku dashboard, you'll see it set up with basically everything you need. In HostGator, at https://portal.hostgator.com/domain/manage), click on your domain name and find the link to change the nameservers. Select Manually set my nameservers, and replace the default nameservers with the nameservers you see labelled with NS on the main page of the PointDNS add-on page. (You're also free to add more or or change them in PointDNS.)
HostGator says it will take a couple days to propagate. I saw the change take effect within seconds.
If it doesn't work without www. now (check pages besides the index page), I've outlined a potential solution here.
With this PointDNS solution, you may want to test your site at different places in the world to make sure it's available there. I made sure mine is available from places where I expect people to view it, but it's also available in Beijing, so I don't think you'll have geographic limitations with PointDNS. I like to use www.webpagetest.org to test the site from different locations.

Answer 2

According to https://devcenter.heroku.com/articles/custom-domains you must add a CNAME record like "CNAME www example.herokuapp.com" first at Hostgator. After that, you must add www.example.com (with or without www) as a custom domain to your project. It's really simple.