Deploying MERN app to Heroku - Multiple issues

[rise-and-shane93]

Describe the bug

I am attempting to deploy my first MERN stack app to Heroku but I am getting different errors when I try different workarounds. Here is the link to the repo.

Prior to all of these errors, I added a script in the package.json file that starts the server and frontend on npm run heroku-start

Error 1: Invalid Host Header Steps to reproduce:

• Add proxy as a string in package.json file and set it to the frontend route (should be port 3000)
• The proxy is still http://localhost:3000, so would that cause a problem?

Error 2:Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS Steps to reproduce:

• Remove the proxy entry in package.json, install http-proxy-middleware, and add setupProxy.js with the following code: const proxy = require('http-proxy-middleware'); module.exports = function(app) { app.use(proxy('/auth/google', { target: 'http://localhost:3003/' } )); }

When I open the site after doing that, I get that error but can still load the site if I remove the "s" in "https." However, since I am able to view the live site, I am able to observe...

Error 3: Backend not connected

Although the frontend works, the backend does not. I would assume this has to do with not having proxy in the package.json file but since there is no connection to my server-side code or MongoDB I get a 404 error.

I hope I was able to explain this in good enough detail to get assistance with this. Let me know if you have any additional questions

Did you try recovering your dependencies?

(Write your answer here.)

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

(paste the output of the command here.)

Steps to reproduce

(Write your steps here:)

1. 2. 3.

Expected behavior

(Write what you thought would happen.)

Actual behavior

(Write what happened. Please add screenshots!)

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[Dodobrat]

This is my suggestion for Error 3: I had some of the issues when I tried deploying to heroku with a proxy as well. Heroku did not recognize the proxy in package.json. I hosted mine in Netlify but the fix should be the same. Try adding the proxy string to your API call routes.

Example: axios.post("[WEBSITE_NAME]/api/users/register", userData)...

if that works then you can set axios baseURL and try with that.

[heyimalex]

You shouldn't be deploying the development server (react-scripts start) to production ever. Proxy settings are just a development convenience: the expectation is that in production you'll serve the build artifacts yourself. Reading the deployment documentation in detail should give you a better idea of how everything works together.