Why won't heroku work with proxy in my react app?

Question

I have a simple notes app that uses react(create react app) in a client folder with a node express mongoose back end. If I try to upload to heroku it rejects it because of the proxy ("proxy": "http://localhost:3001") in the package.json in the client folder. If I get rid of the proxy it will upload to heroku no problem but because it's not there it won't talk to the back end so nothing works. When pushing to heroku with the proxy it will build but the app gives me "Invalid Host header". How do I go about fixing this? All I have tried is deleting the proxy.

Answer 1

Are you using a fixed port in your app? Heroku assigns you a dynamic port that you must bind to, so you can't simply use a fixed port like 3001.

You should bind to process.env.PORT when running on Heroku instead. See runtime principles.

Answer 2

So it turns out I had a misspelled index.js document in my models folder and that's what was giving me the Invalid Host Header error. I had a capital I instead of lowercase...

Answer 3

There is a build pack that works around this problems and offer a better experience with create-react-app check it out:

• https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack

Just create your application by running:

heroku create <app name> --buildpack mars/create-react-app