Comment définir construire .des variables d'environnement lors de l'exécution de création de réagir-app script de build?

Je suis en utilisant la variable d'environnement suivante dans mon créez-réagir-app:

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

Il fonctionne quand je lance npm start par la lecture d'un .env fichier:

REACT_APP_API_URL=http://localhost:5555

Comment puis-je définir une valeur différente comme http://localhost:1234 lors de l'exécution d'un npm run build?

C'est mon package.json fichier:

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

OriginalL'auteur sigmus | 2017-02-25

  1. 25

    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 auriez besoin d'avoir 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 la NODE_ENV à 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écuter npm start de nouveau) pour détecter la variable d'environnement change.

    Merci. Je suis conscient de cette approche. Vous pensez que c'est la solution canonique de cette situation?
    Si vous faites votre webpack config "à la main", il y avait un tas de façons de le faire. Je n'ai pas honnêtement savoir si c'est "canonique", mais ça fonctionne, et sans éjection de l'ARC, de sorte que je l'aime.
    Nous sommes aussi en train de penser ajoutant la prise en charge spécifique à l'environnement .env fichiers dans le futur.
    Pensé que je pourrais travailler sur ce sujet, mais ici c'est github.com/facebookincubator/create-react-app/pull/1344
    Quelque chose de stupide que je n'étais pas au courant, mais espérons-le, peut aider d'autres développeurs inexpérimentés, les variables d'environnement définies à l'intérieur de la package.json fichier doit être défini avant le react-scripts build de commande afin d'être détecté, par exemple, REACT_APP_YOUR_VARIABLE=here react-scripts build.

    OriginalL'auteur Andy_D

  2. 71

    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 pour les variables d'environnement dans un .env fichier à la racine de votre "créer-réagir-app" projet.

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

    npm start sera mis REACT_APP_NODE_ENV à development, et donc il va automatiquement utiliser le .env.development fichier, et npm run build jeux de REACT_APP_NODE_ENV à production, et donc il va automatiquement utiliser .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 dans .env.development et .env.production par l'ajout de ces valeurs à un nouveau fichier - .env.development.local et .env.production.local respectivement.

    EDIT: je dois 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.

    comment accéder à l'env de vars dans le code?
    Il utilise un processus.env de nœud: process.env.REACT_APP_API_URI. Voir le ARC de documentation
    Si le script de construction définit toujours l'environnement = "production". comment puis-je déployer mon environnement = 'test' pour mon serveur de test ?
    Il n'existe actuellement aucun moyen d'avoir tous les environnements autres que le "développement" et "production". Vraiment un rond-point de la solution de contournement que j'ai est d'ajouter un script dans le paquet.json qui définit une variable d'environnement, il dénotant du mode d'essai, c'est à dire build_testing": "set REACT_APP_ENV=test & react-scripts build, et ensuite une settings.js fichier où chaque variable d'environnement a sa propre fonction, avec une instruction if qui vérifie le contenu de process.env.REACT_APP_ENV et renvoie une valeur codée en dur pour l'environnement de test, ou la véritable variable d'environnement.
    Merci pour l'info sur d'avoir besoin de commencer avec REACT_APP_; j'ai rencontré un problème avec ça.

    OriginalL'auteur Baldeep