0

I'm trying to deploy an app created with the MERN stack on Heroku.

The structure of my app:

enter image description here

the port for the Back-end (Node.js server) is created in server.js:

const port = process.env.PORT || 80;

app.listen(port, () => console.log(`Server running on port ${port}`));

I added a proxy to my client's package.json: enter image description here

I haven't added the environmental variable PORT to Config Vars inside the Heroku panel (I only have added mongoURI and REACT_APP_API_KEY): enter image description here

As I understand, each time in Heroku a dynamic port is created for the server: enter image description here

Inside the 'client' part of the app (where all React.js files are kept) I'm calling a Back-end endpoint, e.g:

enter image description here

enter image description here

However, once the app is deployed (it is built successfully), in the Network tab I can see that the request is being made to http://localhost/pagesWithMovies/1.

How to use the dynamic PORT assigned by Heroku instead? Thanks

enter image description here

rumon
  • 466
  • 2
  • 8
  • 21
  • Do you add the PORT in your environment variable of project – Hamza Zeghari Dec 21 '22 at 10:12
  • I haven't added the PORT to Config Vars inside the Heroku panel. I only have added mongoURI and REACT_APP_API_KEY. Should I add the PORT too? – rumon Dec 21 '22 at 11:13
  • Yes you can add PORT too – Hamza Zeghari Dec 21 '22 at 11:19
  • The problem is that Heroku PORT is assigned dynamically and I don't know which port to assign as env variable. E.g, with my current setup a request to http://localhost:40033/pagesWithMovies/1 is made. However, server running on port 19370 in Heroku. – rumon Dec 21 '22 at 11:35
  • 1
    Don't even try to do this. The dynamic port is for your back-end to bind to, but external traffic is routed in from the standard 80/443 ports. Just make a regular request without specifying a port. – ChrisGPT was on strike Dec 21 '22 at 12:40
  • [Please don't post screenshots of text](https://meta.stackoverflow.com/a/285557/354577). They can't be searched or copied, or even consumed by users of adaptive technologies like screen readers. Instead, paste the code as text directly into your question. If you select it and click the `{}` button or Ctrl+K the code block will be indented by four spaces, which will cause it to be rendered as code. – ChrisGPT was on strike Dec 21 '22 at 22:52
  • @Chris it seems your suggestion of making a regular request without specifying a port worked. Also, it's good you wrote that I should not use screenshots and use code as text instead, I'll do so next time. Cheers! – rumon Dec 22 '22 at 08:09

0 Answers0