Добавление файла.env для Реагирования проекта

Я пытаюсь скрыть свой API-ключ, когда я передаю github, и я просмотрел форум для руководства, особенно следующее сообщение:

Как скрыть ключ API в приложении create-react-app?

Я сделал изменения и перезапустил пряжу. Я не уверен, что я делаю неправильно - я добавил файл .env в корень моего проекта (я назвал его process.env), и в файле я просто поместил REACT_APP_API_KEY = 'my-secret-api-key'.

Я думаю, это может быть так, как я добавляю ключ к моей fetch в App.js, и я попытался несколько форматов, в том числе без использования шаблона буквального, но мой проект по - прежнему не компилируется.

Буду признателен за любую оказанную помощь.

performSearch = (query = 'germany') => {
    fetch('https://api.unsplash.com/search/photos?query=${query}&client_id=${REACT_APP_API_KEY}')
    .then(response => response.json())
    .then(responseData => {
        this.setState({
            results: responseData.results,
            loading: false
        });
     })
     .catch(error => {
            console.log('Error fetching and parsing data', error);
     });
}

Ответы

Ответ 1

4 шага

1) npm install dotenv --save

2) Затем добавьте следующую строку в свое приложение.

require('dotenv').config()

3) Затем создайте файл .env в корневом каталоге вашего приложения и добавьте в него переменные.

// contents of .env 

REACT_APP_API_KEY = 'my-secret-api-key'

4) Наконец, добавьте .env в ваш файл .gitignore, чтобы Git игнорировал его и никогда не попадал на GitHub.

Ссылка - https://medium.com/@thejasonfile/using-dotenv-package-to-create-environment-variables-33da4ac4ea8f

Ответ 2

Так что я сам новичок в React и нашел способ сделать это.

Это решение не требует никаких дополнительных пакетов.

Шаг 1 ReactDocs

В приведенных выше документах упоминается экспорт в Shell и другие параметры, один из которых я попытаюсь объяснить, это использование файла .env.

1.1 создать Root/.env

#.env file
REACT_APP_SECRET_NAME=secretvaluehere123

Важные примечания ДОЛЖНЫ начинаться с REACT_APP_

1.2 Доступ к переменной ENV

#App.js file or the file you need to access ENV
<p>print env secret to HTML</p>
<pre>{process.env.REACT_APP_SECRET_NAME}</pre>

handleFetchData() { // access in API call
  fetch('https://awesome.api.io?api-key=${process.env.REACT_APP_SECRET_NAME}')
    .then((res) => res.json())
    .then((data) => console.log(data))
}

1.3 Построить Env Issue

Таким образом, после того, как я выполнил шаг 1.1 | 2, он не работал, и я нашел вышеупомянутую проблему/решение. Реагирует на чтение/создание env при сборке, поэтому вам нужно запускать npm каждый раз, когда вы изменяете файл .env, чтобы переменные обновлялись.

Ответ 3

Пользователи Webpack

Если вы используете webpack, вы можете установить и использовать dotenv-webpack, для этого выполните следующие действия:

Установить пакет

yarn add dotenv-webpack

Создать файл .env

// .env
API_KEY='my secret api key'

Добавьте его в файл webpack.config.js

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

Используйте это в своем коде как

process.env.API_KEY

Для получения дополнительной информации и информации о конфигурации, посетите здесь

Ответ 4

Сегодня есть более простой способ сделать это.

Просто создайте файл .env.local в корневой директории и установите там переменные. В твоем случае:

REACT_APP_API_KEY = 'my-secret-api-key'

Затем вы называете это в своем JS файле следующим образом:

process.env.REACT_APP_API_KEY

React поддерживает переменные окружения, так как [email protected] Вам не нужен внешний пакет для этого.

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env

* примечание: я предлагаю .env.local вместо .env, потому что create-реакции-приложение добавляет этот файл в gitignore при создании проекта.

Приоритет файлов:

npm start:.env.development.local,.env.development,.env.local,.env

npm run build:.env.production.local,.env.production,.env.local,.env

Тест npm:.env.test.local,.env.test,.env (примечание .env.local отсутствует)

Дополнительная информация: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

Ответ 5

Вы должны установить npm install env-cmd

Создайте .env в корневом каталоге и обновите, как это & REACT_APP_ - обязательный префикс для имени переменной.

REACT_APP_NODE_ENV="production"
REACT_APP_DB="http://localhost:5000"

Обновить package.json

  "scripts": {
    "start": "env-cmd react-scripts start",
    "build": "env-cmd react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }