Jak ustawić build.zmienne env podczas uruchamiania skryptu create-react-app build?

Używam następującej zmiennej środowiskowej w mojej aplikacji create-react: 

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

Działa gdy uruchamiam npm start czytając .env Plik: 

REACT_APP_API_URL=http://localhost:5555

Jak ustawić inną wartość jak http://localhost:1234 podczas wykonywania npm run build?

To jest mój package.json Plik: 

{
  "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"
  }
}
Author: sigmus, 2017-02-25
Source

5 answers

Możesz użyć process.env.NODE_ENV Tak: 

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

Musisz mieć REACT_APP_PROD_API_URL i REACT_APP_DEV_API_URL ustawione.

Lub, jeśli adres URL produkcji jest zawsze taki sam, możesz go uprościć: 

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

Create React app ustawia NODE_ENV na 'production' w kompilacji, więc nie musisz się martwić, kiedy ustawić ją na produkcję.

Uwaga: musisz ponownie uruchomić serwer (np. ponownie uruchomić npm start), aby wykryć zmiany zmiennych środowiskowych.

 55
Author: Andy_D,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-17 19:13:34

Domyślam się, że to już działa, ale dla każdego, kto to znajdzie, ustawiasz domyślne zmienne środowiskowe w pliku .env w katalogu głównym projektu "create-react-app".

Aby oddzielić zmienne używane podczas używania npm start i npm run build można utworzyć dwa kolejne pliki env - .env.development i .env.production.

npm start ustawia REACT_APP_NODE_ENV na development, a więc automatycznie użyje pliku .env.development, a npm run build ustawi REACT_APP_NODE_ENV na production, a więc automatycznie użyje .env.production. Wartości ustawione w spowoduje to nadpisanie wartości w .env.

Jeśli pracujesz z innymi ludźmi i masz wartości specyficzne tylko dla twojego komputera, możesz nadpisać wartości w .env.development i .env.production, dodając te wartości do nowego pliku-odpowiednio .env.development.local i .env.production.local.

EDIT: powinienem zwrócić uwagę, że zmienne środowiskowe, które ustawiłeś, muszą zaczynać się od "REACT_APP_", np. "REACT_APP_MY_ENV_VALUE".

EDIT 2: jeśli potrzebujesz czegoś więcej niż tylko rozwoju i produkcja, użycie env-cmd, jak określono w ten komentarz .

 139
Author: Baldeep,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-21 09:55:33

Jeśli chcesz mieć oddzielne pliki dotenv do budowania i / lub wdrażania do oddzielnych środowisk (stage, prod), możesz użyć env-cmd w następujący sposób: 

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

To po prostu zaktualizuj swoje package.json odpowiednio: 

  "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"
  },

Następnie aby zbudować wystarczy uruchomić polecenie powłoki: 

npm run build:stage
 31
Author: chrishiestand,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-02-21 20:03:26

Zainstaluj pakiet '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"
  },

W lokalnym jeśli chcemy uruchomić środowisko qa użyj npm run start: qa

 7
Author: Vigneshwaran Chandrasekaran,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-12-03 14:43:36

Również można to zrobić bez dodatkowej zależności: 

"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"
},

I mieć .env.staging, .env.production pliki

 0
Author: Artem Matiushenko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-02-10 14:35:21