створити додаток для реагування, який не забирає файли .env?

Я використовую додаток create response для завантаження програми.

Я додав два .envфайли .env.developmentі .env.productionв кореневій.

Моє .env.developmentвключає:

API_URL=http://localhost:3000/api
CALLBACK_URL=http://localhost:3005/callback

Коли я запускаю свою програму за допомогою react-scripts startі консолі, process.envвона спливає

{ NODE_ENV: "development", PUBLIC_URL: "" }

Я пробував різні речі, але це просто не збирання змінних у моєму файлі розробки, що я роблю не так ?!

Структура Directry:

/.env.development
/src/index.js

Сценарій Package.json:

"start": "export PORT=3005; npm-run-all --parallel server:start client:start",
    "client:start": "export PORT=3005; react-scripts start",
    "server:start": "node server.js",
    "build": "react-scripts build",

Редагувати:

@jamcreencia правильно вказав, мої змінні повинні починатися з REACT_APP.

Редагувати 2

Це нормально працює, якщо я називаю файл, .envале ні, якщо я використовую .env.developmentабо.end.production

З create-react-app, ви повинні префікс REACT_APP_до імені змінної , щоб мати можливість доступу до нього.

Приклад:

REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_CALLBACK_URL=http://localhost:3005/callback

Більше інформації дивіться тут

Переконайтеся, що ваш файл .env знаходиться в кореневому каталозі, а не всередині папки src.

Була така сама проблема! Рішенням було закрити підключення до мого сервера вузлів (це можна зробити за допомогою CTRL + C). Потім перезапустіть свій сервер із "npm run start", і .env повинен працювати належним чином.

Джерело: Github

Якщо ви хочете використовувати кілька середовищ, таких як .env.development .env.production

використовуйте пакет dotenv-cli

додати .env.developmentі .env.productionв кореневу папку проекту

та ваш package.json

"scripts": {
    "start": "react-app-rewired start",
    "build-dev": "dotenv -e .env.development react-app-rewired build",
    "build-prod": "dotenv -e .env.production react-app-rewired build",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"   
},

потім будуйте відповідно до середовища, як

npm run-script build-dev 

Щодо env-cmd . Відповідно до ласкавої публікації VMois на gitHub , env-cmd оновлено (версія 9.0.1 на момент написання), змінні середовища працюватимуть у вашому проекті React наступним чином :

"scripts": {
    "build:local": "env-cmd -f ./.env.production.local npm run build",
    "build:production": "env-cmd -f ./.env.production npm run build"
  }

У вашому файлі package.json .

Для цього існує модуль env-cmd . Встановіть через npm, npm i env-cmdа потім у свій package.jsonфайл у scriptsрозділі:

  "scripts": {
    "start": "env-cmd .env.development react-scripts start",
    "build": "GENERATE_SOURCEMAP=false env-cmd .env.production react-scripts build",
  }

У корені проекту потрібно створити два файли з однаковими змінними env, але з різними значеннями:

.env.development
.env.production

Тоді виключіть їх із загальнодоступних. Для цього у свій .gitignoreфайл додайте два рядки:

.env.development
.env.production

Отже, це правильний спосіб використовувати різні змінні env для dev та prod.

У мене була та сама проблема, але це було тому, що я мав свій .env файл у форматі YAML замість JS.

Це було

REACT_APP_API_PATH: 'https://my.api.path'

але це мало бути

REACT_APP_API_PATH = 'https://my.api.path'

Якщо .envфайл працює , але .env.developmentчи .env.productionнемає, то створити порожній .envфайл поряд з цими двома. Не знаю чому, але це для мене працює.

І пам’ятайте, що після ключа API у файлі env у вас не повинна бути крапка з комою.

REACT_APP_API_KEY = 'ae87cec695cc4heheh639d06c9274a';

має бути

REACT_APP_API_KEY = 'ae87cec695cc44heheh1639d06c9274a'

це була моя помилка

Що стосується останніх реакційних скриптів (3.2.0), це просто, як сказати сказати

PORT=4000
BROWSER=none

у вашому .env або .env.development файлі (..etc), який повинен знаходитись у кореневій папці.

Він НЕ працюватиме з префіксом REACT_APP (документи, здається, застаріли), і він НЕ вимагає додаткових пакунків npm (реакція-сценарії вже включають dotenv 6.2.0)