Here is how can you use both Zeit Now and Heroku on the same domain

Here is how can you use both Zeit Now and Heroku on the same domain

I had this situation at work where I had to add a subdomain for our admin panel to our already existing domain. The domain was bought from GoDaddy, and our admin panel was hosted in Heroku.

Even though I had minimal understanding of how DNS works, I still believed that such a thing should be easy. I know that there is such a thing as a DNS server, which is just a registry of domain -> real IP of a server somehow. So to me, all I had to do was ask GoDaddy:

You already own the domain, can you add an entry for our subdomain and point it to the address that Heroku gives me? That'd be great.

Except that it was a confusing process, and I am here to clarify to people who have been stuck like me.

Quick Review

To quickly review, domain registrars like GoDaddy usually also manage the DNS records themselves. A DNS record is where the mapping between hostnames and addresses is described.

Each record has a type and a value. Common types are:

  • A record: Maps some hostname (nytimes.com) to the actual IPv4 address from which a server exists
  • AAAA record: Similar to an A record, but maps to an IPv4 address
  • CNAME record: Short for Canonical Name. Defines an alias from a hostname to another. This is the one you will likely use to make your [sub]domain point to the address given by your hosting provider.
  • TXT record: A simple text storage. Usually used for machine-readable data like ID, hashes etc. Can be used for verification.

Usual process

I am assuming you already bought the domain. In our case, our domain was bought from GoDaddy. The usual process goes like this:

  1. You go to your domain registrar and login
  2. You go to the dashboard of your domain.
  3. In there you should see a table under a section called Records.
  4. There you would add a CNAME record and set its value to the address given by your hosting provider. For example, let's say you host on Heroku and it gives you the address your-website-lk2kfd.herokuapps.com. That is the address you will insert. (Not completely true but we will talk later about it)
  5. And that's it! After a few minutes everything should be settled down and you should be able to access your website from your [sub]domain.

I thought that would be the end of it. But then it wasn't.

Zeit likes to do things its own way

When I get to the Manage DNS page from the GoDaddy dashboard, I am faced with such a screen:

We can't display your DNS information because your nameservers aren't managed by us

That was definitely very different from the tutorial I read. I wasn't even sure what nameservers meant.

My idea of Zeit was that it was a regular hosting provider, just like Heroku in the sense that it hosts the website and gives an address to which we will point our [sub]domain.

Scrolling a bit down, I see this:

A list of Zeit nameserver addresses

After doing a bit of research, it seems that Zeit likes to manage the DNS records themselves for "high availability and automation" reasons. Can't really agree or disagree with the claim because I don't know better.

Anyway, when I login to the Zeit account I can see the domain we owned and the Zeit project that was using it. The table looked something like this:

Zeit records

I thought great! This is the familiar record screen I was expecting. All I had to do was to click the Add button and type in my subdomain with the correct URL...

Domain - Project list

Hmm... I am presented with Zeit projects. How can I just add a record to point to my Heroku app?

I started to feel that is the part where Zeit to lock you in by only allowing you to map a domain that you own to a project hosted by Zeit.

I thought maybe I could click on Create project... but now it is asking me to use now CLI and to select the git repo and whatnot. Not what I was looking for.

Frustration starts to build up

At this point I am frustrated. Something that should be so simple ends up taking too much of my energy and effort. I dig deeper, write my questions in Google in many different ways trying to find that perfect keyword combination that brings me closer to the answer. I go on Facebook groups, on Slack help channels trying to ask. But the fastest to get your answer is to just email the support team of Zeit.

So I ask them and describe them just like I did here, with screenshots and everything. They answer me by telling me that they don't provide a UI interface through the dashboard as of the time of writing this (18 Sept. 2019), but that I could still add a subdomain that points to my Heroku app through the now CLI. I was relieved.

The correct way of doing it

  1. Push your app to Heroku
  2. Do not use the (...).herokuapps.com that you usually navigate to. You have to go to the Access tab and click on Add domain. This will give you a URL that looks like (...).herokudns.com. That is the one you will point the [sub]domain to.
  3. Go to your Heroku project root through the terminal
  4. Make sure you are logged in to your now CLI. If you are not, enter now login and follow the steps
  5. Execute this command: now dns add domain.com <subdomain_name> CNAME (...).herokudns.com. This will make the <subdomain_name>.domain.com point to your website hosted by Heroku on the (...).herokudns.com

And that's it!

When trying to go to your website through the [sub]domain.com, you might get SSL errors like SSL_ERROR_INTERNAL_ERROR_ALERT. Give it a few minutes, refresh the page and it should be gone. If not, it means there might be a misconfiguration either in the DNS record or in the SSL certificates in which case you should contact the support team for more assistance.

If you enjoyed reading this article and found it helpful, subscribe and leave a comment.