Добавление файла .env в React Project

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

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

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

Я думаю, что это может быть способ добавления ключа к my 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);
     });
}

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.

Если вы используете приложение create-react-app, вам нужны только шаги 3 и 4, но имейте в виду, что переменная должна начинаться с того, REACT_APP_чтобы она работала.

Ссылка: https://create-react-app.dev/docs/adding-custom-environment-variables/

Примечание - Необходимость перезагрузки приложения после добавления переменной в .env файле.

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

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

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

Шаг 1 ReactDocs

В приведенных выше документах упоминается экспорт в оболочке и другие параметры, которые я попытаюсь объяснить, это использование файла .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

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

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

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

REACT_APP_API_KEY = 'my-secret-api-key'

Затем вы вызываете его в своем js-файле таким образом:

process.env.REACT_APP_API_KEY

React поддерживает переменные среды, так как response-scripts@0.5.0. Для этого вам не нужен внешний пакет.

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

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

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

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

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

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

Подробнее: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

Пользователи 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

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

1. Создайте файл .env в корневой папке.

некоторые источники предпочитают использовать .env.developmentи , .env.productionно это не обязательно.

2. Имя вашей ПЕРЕМЕННОЙ -должно- начинаться с REACT_APP_YOURVARIABLENAME.

кажется, что если ваша переменная среды не запускается таким образом, у вас будут проблемы

3. Включите вашу переменную

чтобы включить переменную среды, просто добавьте свой код process.env.REACT_APP_VARIABLE

Вам не нужно устанавливать какие-либо внешние зависимости

Вам необходимо установить 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"
  }

1. Установить dotenvкак devDependencies:

npm i --save-dev dotenv

2. Создайте .envфайл в корневом каталоге:

my-react-app/
|- node-modules/
|- public/
|- src/
|- .env
|- .gitignore
|- package.json
|- package.lock.json.
|- README.md

3. Обновите .envфайл, как показано ниже, и REACT_APP_ - обязательный префикс для имени переменной.

REACT_APP_BASE_URL=http://localhost:8000
REACT_APP_API_KEY=YOUR-API-KEY

4. [ Необязательно, но хорошая практика ] Теперь вы можете создать файл конфигурации для хранения переменных и экспортировать переменную, чтобы использовать ее из других файлов.

Например, я создал файл с именем base.jsи обновил его, как показано ниже:

export const BASE_URL = process.env.REACT_APP_BASE_URL;
export const API_KEY = process.env.REACT_APP_API_KEY;

5. Или вы можете просто вызвать переменную окружения в своем JS-файле следующим образом:

process.env.REACT_APP_BASE_URL

Если вы получаете значения как undefined, то вам следует рассмотреть возможность перезапуска сервера узла и повторной компиляции.