Додавання файлу .env до React Project

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

Як приховати ключ API у програмі create-response-?

Я вніс зміни та відновив пряжу. Я не впевнений, що я роблю неправильно –– я додав .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);
     });
}

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-response-, то вам потрібні лише кроки 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

У вищевказаних документах вони згадують експорт у 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 Випуск Build Env

Тож після того, як я зробив крок 1.1 | 2, він не працював, то я знайшов вищезазначене питання / рішення. Реагуйте на читання / створення 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 початок: .env.development.local, .env.development, .env.local, .env

npm запуску побудови: .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

Користувачі 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"

Оновіть пакет.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, тоді вам слід подумати про перезапуск сервера вузлів і повторну компіляцію.