Why doesn't axios pull up process.env.BASE_URL from Heroku?

Question

Heroku

Hello.
I have the following axios config in my React project:

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: process.env.BASE_URL || "/api",
});

axiosInstance.interceptors.response.use(res => {
  return res;
}, err => {
  return Promise.reject(err);

});

export default axiosInstance;

As you can see, if there is a BASE_URL variable, then I use it. Locally I use the .env file, when deploying I use the heroku variable :

But for some reason it is not used on the production (that is, when I go to heroku the second condition is met "/api")
What could be the problem? The variable for the database works :)
Thanks.

Answer 1

Is React used for SSR or just the client?
The environment variable is present on the server, not in the browser where the react code is being executed. In order for everything to work, you need to take this into account when building the project (parse the code and insert their values ​​​​instead of calling variables). If you take a look at create-react-app, it's already set up right there.