web-dev-qa-db-fra.com

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

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?

Voici 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"
  }
}
reactjswebpackfrontendcreate-react-appreact-scripts
47
sigmus

Vous pouvez utiliser le process.env.NODE_ENV comme suit:

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

Vous devez disposer de REACT_APP_PROD_API_URL et REACT_APP_DEV_API_URL.

Ou, si l'URL de production est toujours identique, vous pouvez le simplifier:

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

Créer React App définit le NODE_ENV sur 'Production' pour vous lors de la génération, de sorte que vous n'avez pas à vous soucier du moment de le définir en production.

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

38
Andy_D

J'imagine que cela fonctionne déjà maintenant, mais pour quiconque trouve cela, vous définissez vos variables d'environnement par défaut dans un fichier _.env_ à la racine de votre projet "create-react-app".

Pour séparer les variables utilisées lors de l’utilisation de _npm start_ et _npm run build_, vous pouvez créer deux fichiers env supplémentaires: _.env.development_ et _.env.production_.

_npm start_ définira _REACT_APP_NODE_ENV_ sur development et utilisera donc automatiquement le fichier _.env.development_ et _npm run build_ définit _REACT_APP_NODE_ENV_ sur production et utilisera automatiquement _.env.production_. Les valeurs définies dans celles-ci remplacent les valeurs de votre _.env_.

Si vous travaillez avec d'autres personnes et avez des valeurs spécifiques à votre ordinateur uniquement, vous pouvez remplacer les valeurs dans _.env.development_ et _.env.production_ en ajoutant ces valeurs à un nouveau fichier - _.env.development.local_ et _.env.production.local_ respectivement.

EDIT: Je dois signaler que les variables d'environnement que vous avez définies doivent commencer par "REACT_APP_", par exemple. "REACT_APP_MY_ENV_VALUE".

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

95
Baldeep

Si vous souhaitez avoir des fichiers dotenv distincts pour la construction et/ou le déploiement dans des environnements distincts (stage, prod), vous pouvez utiliser env-cmd comme suit:

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

Ensuite, mettez à jour votre package.json en conséquence:

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

Ensuite, pour construire, il vous suffirait d’exécuter cette commande Shell:

npm run build:stage
7
chrishiestand