создать приложение реакции не собирать.env файлы?

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

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

My .env.development включает:

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

Когда я запускаю свое приложение с помощью react-scripts start и process.env он выплевывает

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

Я пробовал разные вещи, но он просто не подбирал veriables в моем файле разработки, что я делаю неправильно?!

Структура прямой:

/.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 но нет, если я использую .env.development или .end.production

Ответы

Ответ 1

С create-react-app, вы должны префикс REACT_APP_ к имени переменной, чтобы иметь возможность доступа к ней.

Пример:

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

Больше информации здесь

Ответ 2

Если вы хотите использовать несколько окружений, таких как .env.development .env.production

использовать пакет dotenv

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

и ваш пакет.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

Ответ 3

Убедитесь, что ваш файл .env находится в корневом каталоге, а не в папке src.

Ответ 4

Для этого есть модуль env-cmd. Установите через npm npm я 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.

Ответ 5

Была такая же проблема! Решением было закрыть соединение с сервером моего узла (вы можете сделать это с помощью CTRL + C). Затем перезапустите ваш сервер с помощью 'npm run start', и .env должен работать правильно.

Источник: Github

Ответ 6

По поводу 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.

Ответ 7

Если файл .env работает, а .env.development или .env.production - нет, то создайте пустой файл .env вместе с этими двумя. Я не знаю почему, но это работает для меня.

Ответ 8

У меня была такая же проблема, но это было потому, что у меня был .env файл в формате YAML вместо JS.

Это было

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

но это должно быть

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