Transitioning my Portfolio Site From Netlify to Heroku — pt. 1
In a previous post I discussed some of the processes that I was going through as I was switching things up with my portfolio site — specifically moving from a completely homemade React site, to an express app built on a template I found at https://html5up.net/, which has many great options to choose from. The initial challenge that I came across was deploying the new portfolio site. Netlify, where I was hosting my original React project, is still an option for hosting Express applications, and details about how to do that can be found here: https://www.netlify.com/blog/2018/09/13/how-to-run-express.js-apps-with-netlify-functions/#express-js-on-netlify. However, I simply followed a tutorial to convert my basic HTML/CSS/JS project into an Express application, and as such, am not really comfortable with making customizations to the Express application structure, which seems to be necessary when deploying to Netlify. Luckily for me, Heroku offers hosting for Express applications without having to jump through any hoops, and so I was able to get the project hosted and online, but one big problem remained — the domain name.
I had originally purchased my domain name directly from Netlify, which was great for me because once I purchased the domain, Netlify handled the rest — I didn’t have to do any configuration to connect that domain name to my application. Moving that domain name to Heroku was the big issue for me, mostly I think because of my lack of experience. Coming in never having dealt with ANAMEs, CNAMEs, nameservers, and SSL, these foreign terms presented a challenge, that only through trying anything and everything was I able to overcome.
Although I certainly had more than my fair share of confusion and consternation, there really are only a few steps that I had to take to transfer the domain from one application to another. First, I set up a new account on name.com, and contacted Netlify support to ask them to transfer my domain to my name.com account — easy enough. From there on my name.com account, I updated the domain’s nameservers to the default nameservers.
Name.com describes a nameserver as “an internet server that points your domain to a hosting provider, and an important component of DNS records.” This step wasn’t particularly complicated because the site provides a button title “USE DEFAULT NAMESERVERS” that allowed me to make the change with one click. Next up on the Heroku side of things I followed the instructions located at https://devcenter.heroku.com/articles/custom-domains. Essentially following those steps gave me two randomly generated urls looking something like “encircled-magnolia-9265.herokudns.com.” While inside the project’s directory running the terminal command “heroku domains” lists those two urls, and even indicates the DNS record type — ANAME and CNAME.
In the above image, I’ve demonstrated how I took those two urls from Heroku, and plugged them into the DNS record section for my domain at Name.com. After letting it sit for a few minutes things were starting to work — only one big problem remained: the site was not secure. My Google Chrome settings block any site that is not secured with SSL, (and I’m sure that I’m not the only one), so the only way I was able to access the site was by opening up a tab in incognito mode, and manually typing in the whole url: “http://www.jacobkenny.com.” Obviously this is a problem since nobody should have to jump through hoops just to access my site, and even though my site doesn’t store any passwords or financial information, it would be alarming as a user to visit a site that the browser is basically screaming is insecure. The solution to this problem? — secure sockets layer, or SSL.
Figuring out the implementation of SSL for my portfolio site turned out to be the most challenging task for me to complete during this transition; to give it the deserved attention, I’ll save the rest of the discussion for another post, but in the meantime feel free to check out my fully-secured portfolio site: jacobkenny.com.
