How to set up a Heroku web application with Google Domains

When I was creating my first portfolio, I wanted to develop my skills with both frontend and backend. So I created a Next.JS frontend hosted on Vercel that consumed information from an Express/Node.js API hosted on Heroku.

Now if I were actually developing a geniune web application for production, I would most likely not structure it this way. A separate frontend and backend hosted on different web platforms creates all kinds of headaches.

However, it helped me achieve my following goals:

• Create a Node/Express API
• Setup secure data storage and management in a PostgreSQL database
• Enable efficient and secure communication and data transfer between a separate frontend and backend

One of those headaches was how to enable cross-site cookies between my frontend on Vercel and my backend on Heroku. I discovered that cookies cannot be set for a *.herokuapp.com domain as it is included on Mozilla's Foundation's Public Suffix List.

This is a security measure that requires us to set up a custom domain for our Heroku web application. If you would like to learn more about this issue check out my article Why you cannot set cross-origin cookies with a Heroku domain.

The web application that this guide focuses on can be viewed here.

Overview

In this guide I will demonstrate how you can integrate a custom domain from Google Domains with your Heroku web application.

Heroku is one of the most popular platforms for hosting web applications in the cloud. Google Domains is one of the most popular platforms for managing domain names. Hopefully, this article can help other developers save some time and energy.

This guide assumes that you already have a domain through Google Domains and a functioning web application at Heroku. In addition if you want your web application served over https (which you should) there are two options.

1. Pay for at least a Hobby level plan on Heroku ($7/month)
2. Manually upload your own SSL certificate

My recommendation is just pay the $7/month and have Heroku handle the SSL certificate.

Table of Contents

• Add domain to Heroku
• Adjust Google DNS records
• Test

Add domain to Heroku

The first step in this process is adding your custom domain to Heroku. In order to add a custom domain to Heroku you first need to verify your account. This just means that you need to add a valid credit card under your billing settings.

Now under your web application's settings you can click Add domain. Enter your domain name following this format 'www.domainName.com'. Then click Next and copy the DNS target that appears.

Adjust Google DNS records

From your Google Domains dashboard, select your desired domain and then navigate to the DNS settings. Unlike many hosting platforms, Heroku does not provide DNS services which means you will want to use the Default name servers tab.

Under Resource records you will click Custom records. You should fill out the custom record as demonstrated below:

• Host name = www
• Type = CNAME
• TTL = 3600
• Data = copied DNS target from Heroku

Next be sure to enable DNSSEC which is located right below the Resource records.

Test

It usually takes a couple of minutes for the updated DNS records to propogate through the internet. However sometimes it can take up to 24 hours.

So if it does not initially work give it a little bit of time. However, if set up correctly your web application should now be available at your custom domain.