.env и .env.local Как задавать, переопределять и использовать Переменные окружения в коде React-приложения create-react-app

Если конфиг вебпака не извлечен (стандартное состояние create-react-app)

Для React 17 (и, скорее всего всех более новых версий) значения из файла .env (создаем его в корне проета) подтягиваются автоматически, далее все переменные с обязательным префиксом REACT_APP_ можно получить в коде через обращение к process.env.REACT_APP_ИмяПеременной, например, если задали в .env как:

REACT_APP_AUTH_HOST = 'test.loc'

то в коде приложения получаем получаем как:

 const baseUrl = process.env.REACT_APP_AUTH_HOST;

- если рядом положить .env.local, то значения также будут подхватываться и переопределяться.

ВНИМАНИЕ: не забывайте перезапускать сборку для проверки изменений (напр. npm start) т.к. env-файлы не часть кодовой базы и не подхватываются на лету.

Если конфиг вебпака извлечен (extract)

ПРИМЕЧАНИ: предварительно проверьте - может в вашей версии все работает из коробки как и в разделе выше (см ""Если конфиг вебпака не извлечен (стандартное состояние)"").

Если конфиг вебпака извлечен (что обычно делать не рекомендуется, т.к. при таком подходе будет труднее обновляться), то можно поправить код прямо в нем.