Использование переменных среды в приложении React
Наш ресурс JavaScript просто закрылся, поэтому мне, ничего не зная о фронтенд-разработке, нужно, чтобы мой пользовательский интерфейс встал. Я пытаюсь использовать переменную среды в javascript, и кажется, что есть 100 различных способов сделать это.
Все, что я знаю, это приложение для реакции / узла. Запускаю с npm run start. Ему нужна конечная точка, которую я определил в моем .bash_profile, XREFS_BACK_URL. Я думал, что могу просто использовать process.env.XREFS_BACK_URL, но, видимо, это должно быть определено в каком-то файле? Я не знаю, в каком файле и где он должен находиться.
Извините за то, что я невежественен - он только что приземлился мне на колени, и мне нужно быстро его поднять!
Обновлять:
Я создал файл .env в корневом каталоге. Это одна строка:
REACT_APP_XREFS_BACK_URL=http://localhost:8080
В своем коде я пытаюсь использовать это так:
var endpoint = process.env.REACT_APP_XREFS_BACK_URL;
console.info("endpoint is " + endpoint);
Но консоль показывает, что endpoint - это UNDEFINED.
Мой package.json здесь:
{
"name": "bulletin-board",
"version": "0.0.1",
"private": true,
"devDependencies": {
"babel-jest": "^22.4.1",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"jest": "^22.4.2",
"react-scripts": "0.2.1",
"react-test-renderer": "^16.2.0",
"webpack": "^4.6.0"
},
"dependencies": {
"font-awesome": "^4.7.0",
"match-sorter": "^2.2.1",
"namor": "^1.0.1",
"npm": "^6.0.0",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"react-draggable": "^2.2.0",
"react-table": "^6.8.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"test": "jest"
},
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
"moduleFileExtensions": [
"js",
"json",
"jsx"
],
"moduleNameMapper": {
"^.*[.](jpg|JPG|gif|GIF|png|PNG|less|LESS|css|CSS)$": "EmptyModule"
},
"preprocessorIgnorePatterns": [
"/node_modules/"
],
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react",
"<rootDir>/node_modules/react-dom",
"<rootDir>/node_modules/react-addons-test-utils",
"<rootDir>/EmptyModule.js"
]
},
"eslintConfig": {
"extends": "./node_modules/react-scripts/config/eslint.js"
}
}
Я не верю, что я ...
вызывает ли сценарий start package.json react-scripts?
Да, он вызывает скрипты реакции.
ах бинго ... у вас действительно старая версия сценариев реакции. попробуйте обновить свои сценарии реакции и перезапустить. npm install --save-dev [email protected]
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Ваше приложение было создано с помощью create-react-app. Вот документы для добавления / ссылки на переменные среды: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables
Создайте в корневой папке файл с именем .env с содержимым:
REACT_APP_XREFS_BACK_URL=put_whatever_here
Затем получите доступ к этой переменной в своем JavaScript через:
process.env.REACT_APP_XREFS_BACK_URL
Я поместил файл .env в корень приложения, но REACT_APP_XREFS_BACK_URL по-прежнему остается UNDEFINED.
ты перезапустил приложение?
Обещаю, что сделал!
Можете ли вы обновить свой вопрос с помощью файла .env, кода, в котором вы его регистрируете на консоли, и версии react-scripts в вашем package.json
это process.env.REACT_APP_XREFS_BACK_URL;, а не process.env.XREFS_BACK_URL;
Извините, я думал, что REACT_APP_ был добавлен автоматически. Но это все еще не определено, даже с этим изменением.
опубликуйте весь свой package.json. также в каком файле находится ваша консоль? это в папке src?
Я просматриваю console.info в окне браузера. Выложу package.json.
я знаю, что именно здесь вы ищите журнал ... Я имею в виду, в каком файле этот журнал записан? вы не можете получить доступ к process.env из консоли браузера
Я не знаю ни одного файла, в который записывается ... Я не вижу ни одного.
также, чтобы уточнить ... ваш package.json также находится в корне?
Да, package.json находится в корне папки приложения.
Что вы имеете в виду, когда не знаете, в каком файле записан ваш console.info ... в какой файл ВЫ записали текст console.info("endpoint is " + endpoint); ???
Ой, извините, я вас неправильно понял. Это в index.js.
Нет. Сначала он пожаловался, что index.html не является общедоступным. Я переместил его туда, и теперь там написано Cannot read property 'thisCompilation' of undefined. Понятия не имею, о чем идет речь. Этот код отлично работал до того, как я попытался добавить env var.
ну .... версия сценариев реакции, которая у вас была раньше, к сожалению, не поддерживает переменные среды. Я бы порекомендовал использовать инструмент командной строки create-react-app для формирования нового проекта, чтобы увидеть, как он настроен. может быть, есть всего несколько небольших отличий
Вот и получилось! Большое спасибо!! Я бы отдал вам все свои очки, если бы мог !!!
проголосовать за мой ответ не повредит: p
Чтобы прояснить, почему вы его не видели: «Примечание. Вы должны создать пользовательские переменные среды, начинающиеся с REACT_APP_. Любые другие переменные, кроме NODE_ENV, будут проигнорированы, чтобы избежать случайного раскрытия закрытого ключа на компьютере, который может иметь то же имя. Изменение любых переменные среды потребуют перезапуска сервера разработки, если он работает ".
Не уверен, если это актуально для вас, CNDyson, но я думаю, что это может быть полезно для новичков, таких как я:
npm install --save dotenv- создать файл
.envв корневом каталоге - объявить там
REACT_APP_**VARIABLE_NAME** = dont forget about REACT_APP - используйте это так:
process.env.REACT_APP_**VARIABLE_NAME**
Настоятельно рекомендую изучить эти ссылки:
https://create-react-app.dev/docs/adding-custom-environment-variables/ - официальная документация
https://www.npmjs.com/package/dotenv - dotenv
Проблема в том, что обычно вы хотите получить доступ к переменным среды, присутствующим на сервере, на котором размещено ваше приложение.
С описанным решением вы никогда не сможете сделать docker run --env FOO = "value of foo" my-org/my-app
затем откройте FOO в приложении, например process.env["FOO"].
create-react-app объединяет переменные среды, которые определяются при запуске yarn build.
Если вы хотите, например, получить доступ к переменным среды, определенным в контейнере докера, проверьте: реагировать-envs
вы используете webpack? если так, есть вещи, которые их берут и сжигают.