Using External Webhosting To Deploy Your Heroku App

When I had to add a custom domain to my Heroku app, it seemed like such an easy task. Atleast that’s what the tutorials promised me. They told me that it was as simple as adding the custom domain to Heroku through the command line (or through the Heroku Dashboard) and adding a CNAME record to my DNS provider. So I got to work and bought my domain at NameCheap, and sure enough once I followed all the steps herethings worked perfectly.

But I wanted to transfer the domain to my EcoWebHosting account because I got a free three year subscription there through my Udemy courses. Plus, that account gave me free email, which NameCheap wanted me to pay extra for. How hard could switching over be, right?

Wrong. I couldn’t understand for the life of me what I was doing wrong when I edited my DNS records on my EcoWebHosting domain manager. Now, I must warn you, this might purely be my incompetence speaking because the solution is breathtakingly simple. But just in case its a more common problem that I think it is, I thought I should put this guide out there.


Step 1

Go to the site from which you purchased the domain and find the setting that allows you to change your DNS provider. Under that choose custom DNS and set your nameservers to those provided by your hosting site. For EcoWebHosting the name servers are

ns1.ecowebhosting.co.uk
ns2.ecowebhosting.co.uk

Step 2

Login to your hosting service and create a new hosting package, and enter in your domain name. Once that is created, a navigate to Manage Domains and select DNS management.

Step 3

Under DNS management, look for the CNAME or AAAA record associated with www. Delete that record. Next add your own CNAME record with sub-domain www and CNAME yourappname.herokuapp.com.

Step 4

Next login to your Heroku Dashboard and under the settings tab for your app, add the custom domains

yourapp.com
www.yourapp.com

After a while, this may take a day or two (though for me it was quite fast), you should be able to access your site through the www.yourapp.com domain. Just typing yourapp.com may not take your to your site, but might show you an index placeholder page generated by your hosting company.

Step 5

If you can access your site through the www.yourapp.com domain but not simply by typing yourapp.com, follow these next set of steps. Ideally, you should add another set of CNAME Records for the subdomains “” (first value left blank) and “*“. However, for hosting sites like EcoWebHosting, this can’t be done as the mail servers are already using these ID’s. The following is a simple workaround.  

Go into your file structure (accessible from cPanel through the Manage Your Hostings link on the site). Navigate into the folder containing a file called index.html. Inside this folder create a new file called .htaccess and type the following inside it

Redirect / http://www.yourapp.com

What’s happening here is that every time your site is opened through the yourapp.com domain, it is redirected to the www.yourapp.com domain.

Conclusion

And that’s it. It is a simple process, but one that I found no documentation for. Hopefully this lets you get your app running on a custom domain easily enough!

Leave a Reply

Your email address will not be published. Required fields are marked *