I'm quite new to Heroku and backend overall.. I'm trying to deploy an app to heroku which makes POST requests in the frontend to the backend server (MERN stack). Everything works fine ONLY on the localhost.

I tried setting the server link to "page_name.herokuapp.com" and even left the url empty with "/refresh" and "/" but it does not seem to recognize that I'm making POST requests.

I heard about environmental variables - but I'm not sure how to set them up. Do I make an env file and put the const baseUrl in there or should I do it on the settings in Heroku ?

Sorry if this is a silly mistake, but I cant figure out how to make my frontend/backend cooperate.

const baseUrl = process.env.baseURL || "http://localhost:3001";

useEffect(() => {
    fetch(`${baseUrl}/`)
    .then((res) => res.json())
    .then((res) => setStocks(res))
  },[]); 

const handleRefresh = (e) => {
  e.preventDefault();
  const res = e.target.dataset.value;

  if (stocks !== '') {

    const options = 
    {
      method: 'POST',
      headers: {
        'Content-Type':  'application/json'
      },
      body: JSON.stringify({res}),
    };

    const response = fetch(`${baseUrl}/refresh`, options);

  };
}

these are the package.json scripts file for react/frontend

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
  },

Procfile:

web:nodemon backend/index.js // tried node backend/index.js as well

https://github.com/szumi112/stockpricesapp - here's my github for more information

Not sure what else I can do to figure this out. Let me know if more information is needed.