accessing port in react in full-stack heroku deployment

Question

i am deploying a full-stack app on heroku, meaning there is a node.js backend and a react frontend. From the frontend fetches to the backend are made using urls of type "http//localhost:8080"

in the backend i am able to extract the port that heroku is assigning to the deployment using

app.set('port', process.env.PORT || 8080);

this works because it is Node.js that creates the process object. In the React Frontend this doesn´t work because the process object is undefined.

i have played around with with a Procfile, like that

web: PORT=$PORT ts-node-dev ./index.ts 

this does not work in manually setting the global PORT Variable but in the heroku logs i can see that it is reading $PORT correctly.

my question is how can i set the global PORT variable corrrectly or, if thats not possible, how can i read out the port that heroku sets from within React

Answer 1

You would install an npm package called “dotenv” which allows you to set these variables.

You create a .env file that contains all of your variables which are defined in all caps and underscores like DATABASE_PASSWORD = “my password”. Then in your other files like your server file you would import it then use process.env.DATABASE_PASSWORD to pull it from that file and into the file that you want to use the variable in. Heroku just uses it by default.

As for what port Heroku uses and why check out this link which I think will help answer your other questions.