Comment définir les variables de construction .env lors de l'exécution du script de création create-react-app?

Question

J'utilise la variable d'environnement suivante dans mon application créer-réagir:

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

Cela fonctionne lorsque je lance npm start en lisant un fichier .env :

 REACT_APP_API_URL=http://localhost:5555
 

Comment définir une valeur différente, telle que http://localhost:1234 lors de l'exécution de npm run build ?

Ceci est mon fichier 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

J'imagine que vous avez obtenu ce travail, mais pour quelqu'un d'autre qui trouve cela, vous réglez vos paramètres par défaut des variables d'environnement en .env le fichier à la racine de votre "créer-réagir-app" du projet.

Afin de séparer les variables utilisées lors de l'utilisation d' npm start et npm run build vous pouvez créer deux plus env fichiers - .env.development et .env.production.

npm start fixera REACT_APP_NODE_ENV de development, et donc il va automatiquement utiliser l' .env.development le fichier, et npm run build jeux REACT_APP_NODE_ENV de production, et donc il va utiliser automatiquement .env.production. Les valeurs définies dans les présentes sera de remplacer les valeurs dans votre .env.

Si vous travaillez avec d'autres personnes, et ont des valeurs spécifiques à votre machine, vous pouvez remplacer les valeurs en .env.development et .env.production par l'ajout de ces valeurs à un nouveau fichier - .env.development.local et .env.production.local respectivement.

EDIT: je tiens à souligner que les variables d'environnement que vous avez défini doit commencer par "REACT_APP_", par exemple. "REACT_APP_MY_ENV_VALUE".

EDIT 2: si vous avez besoin de plus de développement, et de la production, de l'utilisation env-cmd, comme spécifié par ce commentaire.

Answer 2

Vous pouvez utiliser l' process.env.NODE_ENV comme:

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

Il vous faudra REACT_APP_PROD_API_URL et REACT_APP_DEV_API_URL ensemble.

Ou, si la production de l'URL est toujours le même, vous pouvez simplifier:

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

Créer Réagir Application définit l' NODE_ENV de la "production" pour vous, alors vous n'avez pas besoin de vous soucier de quand pour le mettre en production.

Remarque: vous devez redémarrer votre serveur (par exemple, exécutez npm start de nouveau) pour détecter la variable d'environnement change.