To add a custom domain to your app, you need to add your credit card information in your account but don't worry it's just to validate and no money would be charged.
By default, Heroku creates a subdomain for your app so we can preview our app. Let's create an app first by the solarsurvey, just make sure it's not taken already. The subdomain URL generated would be https://solarsurvey.herokuapp.com/.
Now to add custom domain go to settings tab for that app click on add domain button and add your domain name including www part.
Now we need to configure this domain’s dns settings, I bought the domain from GoDaddy. Firstly, sign in to your account and click Manage DNS button against this domain.
This will redirect you to the domain’s DNS settings page. So, normally you would add an A record for your app that requires an IP address to point to but in case of Heroku, our apps do not have static ips because Heroku serves dynamic ips and this won’t work at all. read more here.
So, the solution to this is to create a CNAME record that would contain the host along with the target DNS of your app. WHATTTT?
Every custom domain you add to your app has a DNS Target that would be something like <random-haiku-string>.herokudns.com and it would be used when we create a DNS CNAME record on GoDaddy.
On DNS settings page there would be an ADD button, click that and a form would appear. Choose CNAME from the dropdown.
Add the following values:
Host: www
Points to: <random-haiku-string>.herokudns.com(the DNS target value)
TTL: custom (600) second
Click Save.
What this would is let you access your website in the browser using www.yourdomain.com but if you access it by the naked domain (without www part) it won't be accessible. The reason being the limitations of the Heroku platform. They don't support A or CNAME records for apex/root/naked domains.
But all is not lost, there are some supported apex domain configurations like using a DNS provider that supports CNAME-like functionality at the apex or using subdomain redirection. I went with the latter option as GoDaddy provides subdomain redirection.
To do this visit the domain DNS setting page and scroll to the bottom to Forwarding section.
In the forward to field add the URL where you want to redirect the apex domain and also select the protocol (HTTP or HTTPS).
Forward type
Keep it as 301.
Settings
Foward only
- Redirects visitors to a destination URL of your choosing
- Keeps the destination URL in the browser address bar
Forward with masking
- Redirects visitors to a destination URL of your choosing
- Keeps your domain name in the browser address bar
- Allows you to enter meta-tags for search engine information
read more about it here.
Give some time for changes to propagate and then visit your website using your root domain and you would be redirected to the subdomain.
yourdomain.com → www.yourdomain.com
I hope this solves your problem and saves you time. If you find a better way to do this, let me know in the comments.
