Why does React not seem to recognize Heroku's PORT env variable?

Question

I am trying to deploy a frontend react application with a django backend. I am able to get Heroku's PORT environment variable just fine for the Django backend, but no matter what I do or try, process.env.PORT keeps returning undefined. I have tried adding a temporary variable that begins with REACT_APP that just reads the PORT variable in the procfile. Env files won't work because the PORT variable is dynamically allocated.

Every resource I have found have said to either try a .env file or exporting the variable, but like I said, that is unrealistic because Heroku dynamically allocates the port. Any ideas?

Answer 1

Environment variables aren't available in the client. That's running in the user's browser, not the server. For that matter there isn't a Node process running on the server, either. Given you're using an NGINX buildpack the Django app is presumably in a different dyno entirely, you don't need to know which PORT it's bound to. - @jonrsharpe

In the Heroku deployed environment, the project should be oriented such that the frontend will make a request to the backend through a specific url configuration, not through a different port call.