Как добавить произвольную переменную окружения в React-приложении

Итак, нам нужно использовать в каком-то компоненте React-приложения публичный, т.е. не секретный ключ. Как правило, он используется в паре с секретным ключом, загружаемым с бек-энда. Мы не можем его вставить прямо код, хотя бы потому, что ключ может измениться, и придется выискивать все его включения в разных компонентах. Для этого можно использовать переменную окружения.

Считаем, что приложение, созданное с использованием шаблона create-react-app уже существует.

Для начала создадим файл .env и поместим его в корень приложения (на уровне, где package.json).

Добавим в него пару ключ - значение, ключ должен обязательно начинаться с REACT_APP_

REACT_APP_YOUR_PUBLIC_KEY = key_test_skjredfbsbckaskc12casf

Теперь в приложении вы можете использовать значение этой переменной окружения как {process.env.REACT_APP_YOUR_PUBLIC_KEY}.

Только не забудьте перезапустить приложение командой npm start.

Кроме того, приложение по умолчанию уже содержит одну переменную окружения NODE_ENV, которую также можно использовать {process.env.NODE_ENV}.

Переменная NODE_ENV принимает значение development при запуске npm start, production при запуске npm run build и "test", когда выполняете команду npm test.

Другие статьи на сайте http://manual.spb.ru