Invalid Host error when deploying a create-react-a

Question

When I deploy my React app on Heroku, I receive an Invalid Host error.

When I search for a reason, I find this in the docs: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#invalid-host-header-errors-after-configuring-proxy

However, when I create an .env file and include the HOST, I receive this error:

Attempting to bind to HOST environment variable: XXX.herokuapp.com
If this was unintentional, check that you haven't mistakenly set it in your shell.

Could not find an open port at XXX.herokuapp.com.
Network error message: listen EADDRNOTAVAIL 52.205.227.252

What am I doing wrong?

UPDATE: I've set the HOST variable to the Heroku url both via the .env file and through the Heroku CLI, but I'm still getting the above error.

Answer 1

This is a slightly old question, but one of the many I came across while dealing with this same issue, so I'm sharing what I've learned and hope it will be useful to others.

A working solution is to use http-proxy-middleware to manually set up the proxy. Please see an explanation here: deploying create-react-app to heroku with express backend returns invalid host header in browser

Here is a minimal working example: https://github.com/sehailey/proxytest and here is that example deployed: https://proxytest2.herokuapp.com/