How to Deploy a Heroku Backend to a Netlify Subdomain
Tags: heroku, netlify, domain, backend
Published: 2021-01-12 07:28:12

---
title: How to Deploy a Heroku Backend to a Netlify Subdomain
published: true
date: 
tags: heroku, netlify, domain, backend
canonical_url: https://www.mokkapps.de/blog/how-to-deploy-a-heroku-backend-to-a-netlify-subdomain/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/m90lwpfu428uufgjkmzw.jpg
---

On my main domain [mokkapps.de](https://mokkapps.de) I have deployed my private portfolio website. For different use cases, I want to have a [Node.js backend](https://nodejs.org/) deployed to a subdomain, e.g. [api.mokkapps.de](http://api.mokkapps.de).

This blog post describes how you can deploy a [Heroku](https://www.heroku.com/) application to a [Netlify](https://www.netlify.com/) subdomain.

## What is a domain?[<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#what-is-a-domain)

Domain names provide a human-readable address for any web server available on the Internet and are a key part of the Internet infrastructure. You can reach any computer which is connected to the Internet through a public IP address. This IP can either be an IPv6 address (e.g. `2001:0DB8:0000:0001:0000:0000:0010:01FF`), or an IPv4 address (e.g. `174.195.122.45`)

It is no problem for computers to handle such addresses, but we humans struggle to find out what service the website offers or who’s running the server. For us, it is hard to remember IP addresses, and they also might change over time.

All those problems are solved by domain names, like [mokkapps.de](https://mokkapps.de) in my case.

## What is a subdomain?[<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#what-is-a-subdomain)

A subdomain is a domain that is part of a larger domain. An example:

```
Root domain: www.mokkapps.de

Subdomain: api.mokkapps.de
```

Why should you host projects on subdomains? I see two main advantages:

1. You are more flexible by using a different technology stack on your subdomain
2. Code can be in a different Git repository which can help to separate concerns

## Configure Heroku[<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#configure-heroku)

I wanted to deploy a [Node.js backend](https://nodejs.org/) to [Heroku](https://www.heroku.com/) and followed the [official tutorial](https://devcenter.heroku.com/articles/getting-started-with-nodejs) to set up the application.

The next step is to configure the new subdomain in the Heroku dashboard in the `Settings` tab:

[![Heroku Dashboard Settings Domain](https://www.mokkapps.de/static/8d113dc19ca6ccac5d349e8facdeb840/1e043/heroku-settings-domain.png "Heroku Dashboard Settings Domain")](/static/8d113dc19ca6ccac5d349e8facdeb840/36405/heroku-settings-domain.png)

As you can see, I already have added my subdomain `api.mokkapps.de`, a new domain can be added by pressing the `Add domain` button.

All default `appname.herokuapp.com` domains are already SSL-enabled and can be accessed by using HTTPS, for example, `https://appname.herokuapp.com`. To enable SSL on a custom domain you need to use the [SSL Endpoint](https://elements.heroku.com/addons/ssl) add-on which is a **paid** add-on service.

## Configure Netlify[<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#configure-netlify)

As a final step, we need to configure our root domain DNS provider (Netlify) to point to the DNS Target (the Node.js backend deployed via Heroku) shown in the [Heroku dashboard](https://dashboard.heroku.com/).

First, we need to navigate to the Netlify DNS settings and add a new record:

[![Netlify Domain Setting](https://www.mokkapps.de/static/3cf474cf7143e67e523e319adf4940a6/15ec7/netlify-domain-settings.jpg "Netlify Domain Setting")](/static/3cf474cf7143e67e523e319adf4940a6/0f98f/netlify-domain-settings.jpg)[![Netlify DNS Setting](https://www.mokkapps.de/static/608c9a3ead16b838a537fc4282408f29/15ec7/netlify-dns-settings.jpg "Netlify DNS Setting")](/static/608c9a3ead16b838a537fc4282408f29/0f98f/netlify-dns-settings.jpg)

Finally, we are now able to access our Node.js backend via `http://api.mokkapps.de`.

## Conclusion[<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#conclusion)

It is quite easy to configure a Heroku application to be accessible via a Netlify subdomain. The only drawback is that SSL for the Heroku custom domain is a paid add-on.

If you do not pay for the SSL endpoint you will not be able to trigger HTTP requests from your root domain to your custom subdomain as these requests are blocked by [CORS](https://developer.mozilla.org/de/docs/Web/HTTP/CORS).

If your website delivers HTTPS pages, all active mixed content delivered via HTTP on these pages will be blocked by default. The best strategy to avoid mixed content blocking is to serve all the content as HTTPS instead of HTTP and therefore it makes sense to pay for the Heroku SSL endpoint.