Как установить переменные сборки.env при запуске скрипта сборки create-реагировать на приложение?

Question

Я использую следующую переменную окружения в моем приложении create-реагировать:

console.log(process.env.REACT_APP_API_URL) // http://localhost:5555

Это работает, когда я бегу npm start читая .env файл:

REACT_APP_API_URL=http://localhost:5555

Как мне установить другое значение, как http://localhost:1234 при выполнении npm run build?

Это мое package.json файл:

{
  "name": "webapp",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.9.0"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Answer 1

Вы можете использовать process.env.NODE_ENV вот так:

const apiUrl = process.env.NODE_ENV === 'production' ? process.env.REACT_APP_PROD_API_URL : process.env.REACT_APP_DEV_API_URL;

Вы должны были бы иметь REACT_APP_PROD_API_URL а также REACT_APP_DEV_API_URL задавать.

Или, если рабочий URL-адрес всегда один и тот же, вы можете упростить его:

const apiUrl = process.env.NODE_ENV === 'production' ? 'https://example.com' : process.env.REACT_APP_DEV_API_URL;

Create React App устанавливает NODE_ENV на "производство" для вас на сборке, так что вам не нужно беспокоиться о том, когда установить его на производство.

Примечание: вы должны перезагрузить сервер (например, запустить npm start еще раз) для обнаружения изменений переменных среды.

Answer 2

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

Чтобы выделить переменные, используемые при использовании npm start а также npm run build Вы можете создать еще два файла env - .env.development а также .env.production,

npm start установит REACT_APP_NODE_ENV в developmentи поэтому он будет автоматически использовать .env.development файл и npm run build наборы REACT_APP_NODE_ENV в productionи поэтому он будет автоматически использовать .env.production, Значения, установленные в них, переопределят значения в вашем .env,

Если вы работаете с другими людьми и имеете значения, относящиеся только к вашей машине, вы можете переопределить значения в .env.development а также .env.production добавив эти значения в новый файл - .env.development.local а также .env.production.local соответственно.

РЕДАКТИРОВАТЬ: я должен указать, что переменные среды, которые вы установили, должны начинаться с "REACT_APP_", например. "REACT_APP_MY_ENV_VALUE".

РЕДАКТИРОВАТЬ 2: если вам нужно больше, чем просто разработка и производство, используйте env-cmd, как указано в этом комментарии.

Answer 3

Если вы хотите иметь отдельные файлы dotenv для сборки и / или развертывания в разных средах (stage, prod), вы можете использовать env-cmd следующим образом:

npm install --save-dev env-cmd
./node_modules/.bin/env-cmd -f ./stage.env npm build

Тогда просто обновите свой package.json соответственно:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:stage": "env-cmd -f ./.stage.env npm run-script build"
  },

Затем для сборки вы просто запустите эту команду оболочки:

npm run build:stage

Answer 4

Также это можно сделать без дополнительной зависимости:

      "scripts": {
  "build": "sh -ac '. ./.env.${REACT_APP_ENV}; react-scripts build'",
  "build:staging": "REACT_APP_ENV=staging npm run build",
  "build:production": "REACT_APP_ENV=production npm run build"
},

И имеют .env.staging, .env.productionфайлы соответственно

Answer 5

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

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "start:qa": "env-cmd -f .env.qa react-scripts start",
    "build:qa": "env-cmd -f .env.qa react-scripts build"
  },

на локальном уровне, если мы хотим запустить среду qa, используйтеnpm run start:qa

Answer 6

Если вы используете Heroku для развертывания, выполните следующие действия:

• Перейдите в настройки приложения >> нажмите кнопку «Показать переменные конфигурации».
• Добавьте свои переменные
• Используйте их в приложении так же, как вы использовали ранее ex. process.env.REACT_APP_VARIABLE_NAME
• Повторно разверните приложение и все...