react env

React Env - Configuration de l'environnement d'exécution

Remplit votre environnement à partir de fichiers .env au moment de l'exécution plutôt qu'à la construction .

• Isomorphe - serveur et navigateur compatible.
• Prend en charge la génération de sites statique.
• Prend en charge plusieurs fichiers .env .

Réadmettre

• Exemples
• Commencer
• Priorité de fichier
• Cas d'utilisation courants
  • Configuration spécifique à l'environnement
  • Spécifier un fichier env
  • En utilisant avec Docker Pointpoint
• Arguments et paramètres

Exemples

• Exemple utilisant next.js (voir Readme.md)
• Exemple à l'aide de Create React App (voir Readme.md)

Commencer

Ce package génère un fichier __ENV.js à partir de plusieurs fichiers .env qui contient des variables d'environnement cotées en blanc qui ont un préfixe REACT_APP_ .

 < script src =" /public/__ENV.js " />

Dans le navigateur, vos variables seront disponibles à window.__ENV.REACT_APP_FOO et sur le serveur process.env.REACT_APP_FOO . Nous avons inclus une fonction d'assistance pour faciliter la récupération d'une valeur:

 # .env
REACT_APP_NEXT= " Next.js "
REACT_APP_CRA= " Create React App "
REACT_APP_NOT_SECRET_CODE= " 1234 "

devient ...

 import env from "@beam-australia/react-env" ;

export default ( props ) => (
  < div >
    < small >
      Works in the browser: < b > { env ( "CRA" ) } </ b > .
    </ small >
    < small >
      Also works for server side rendering: < b > { env ( "NEXT" ) } </ b > .
    </ small >
    < form >
      < input type = "hidden" defaultValue = { env ( "NOT_SECRET_CODE" ) } />
    </ form >
    < small >
      Entire safe environment:
      < pre >
        < code > { { JSON . stringify ( env ( ) ) } } </ code >
      </ pre >
    </ small >
  </ div >
) ;

.env Fichier Ordre de priorité

Nous avons implémenté des valeurs par défaut saines qui ont l'ordre de priorité suivant:

1. {path-to-file} // from the --path, -p argument
2. .env.{key} // from the --env, -e argument
3. .env.local
4. .env

Votre configuration est disponible dans le navigateur et process.env sur le serveur. Nous vous suggérons d'ajouter .env.local à .gitignore .

Cas d'utilisation courants

Configuration spécifique à l'environnement

Des cadres tels que Next permettent de belles valeurs par défaut telles que .env.local, .env.production, .env . Cela a la limitation où vous voudrez peut-être exécuter votre application dans différents environnements tels que "Staging, Integration, QA" mais toujours créer une application "Production" avec NODE_ENV=production . Avec React-env, c'est possible:

 # .env.staging
REACT_APP_API_HOST= " api.staging.com "
# .env.production
REACT_APP_API_HOST= " api.production.com "
# .env.qa
REACT_APP_API_HOST= " api.qa.com "
# .env.integration
REACT_APP_API_HOST= " api.integration.com "
# .env.local
REACT_APP_API_HOST= " api.example.dev "
# .env
REACT_APP_API_HOST= " localhost "

Pour la mise en scène, vous définissez simplement APP_ENV=staging où vous exécutez votre application:

 {
  ...
  "scripts": {
    "start": "react-env --env APP_ENV -- next start" // where .env.${APP_ENV}
  }
  ...
}

Ainsi REACT_APP_API_HOST=api.staging.com dans votre environnement de stadification.

Veuillez garder à l'esprit que vous devez passer le nom d'une variable d'environnement à --env , pas la valeur de celui-ci.

• ✔ Utilisation valide (macOS): APP_ENV=staging react-env --env APP_ENV -- next start
• Erreur commune: react-env --env staging -- next start

Spécifier un fichier env

Vous êtes également en mesure de spécifier le chemin d'accès à un fichier Env spécifique:

 {
  ...
  "scripts": {
    "start": "react-env --path config/.env.defaults -- next start"
  }
  ...
}

Vous pouvez utiliser n'importe quelle combinaison de ces deux arguments ainsi que la par défaut .env, .env.local pour créer votre configuration d'exécution.

Spécifier un préfixe pour les variables d'environnement de liste blanche

Vous pouvez également spécifier le préfixe des variables d'environnement cotées en blanc:

 {
  ...
  "scripts": {
    "start": "react-env --prefix NEXT_APP -- next start"
  }
  ...
}

 # .env
NEXT_APP_NEXT= " Next.js "
NEXT_APP_CRA= " Create React App "
NEXT_APP_NOT_SECRET_CODE= " 1234 " 

Utilisation du préfixe avec une plaisanterie

Vous devez ajouter la variable Env REACT_ENV_PREFIX avant la commande Jest si vous utilisez env() pendant vos tests:

 {
  ...
  "scripts": {
    "test": "REACT_ENV_PREFIX=NEXT_APP jest --maxWorkers=3"
  }
  ...
}

En utilisant avec Docker Pointpoint

Il est possible d'utiliser ce package comme un script de ENTRYPOINT dans un dockerfile. Cela générera votre fichier de configuration __ENV.js lorsque les bottes de conteneur et permettra à vos scripts package.json de rester inchangés. Bien sûr, node binaire doit être présent dans votre conteneur.

 FROM node:alpine

ENTRYPOINT yarn react-env --env APP_ENV

CMD yarn start

Arguments et paramètres

$ react-env < args > -- < command >

• <command>

Vous pouvez passer une commande, telle qu'un fichier d'entrée NodeJS à l'outil react-env CLI. Par exemple react-scripts , next dev , next start

• --env , -e (par défaut: null)

Spécifiez le nom d'une variable d'environnement existante, dont la valeur est le nom d'un environnement que vous souhaitez, pour faire de React-Env analyse un fichier env spécifiquement spécifique à l'environnement. Par exemple, vous pouvez d'abord définir APP_ENV=staging , puis appliquer --env APP_ENV drapeau. react-env chargerait .env.staging, .env.local, .env dans cet ordre avec ce dernier en prenant la priorité.

• --path , -p (par défaut: null)

Spécifiez un fichier Env spécifique pour charger Eg react-env --path .env.testing Chargerait .env.testing, .env.local, .env dans cet ordre avec ce dernier en prenant la priorité. Une combinaison de --env APP_ENV --path testing où APP_ENV=staging charges .env.testing, .env.staging, .env.local, .env comme ordre de priorité.

• --dest , -d (par défaut: ./public)

Modifiez la destination par défaut pour générer le fichier __ENV.js .

• --prefix (par défaut: react_app)

Modifiez le préfixe par défaut pour les variables Env clôturées blanches. Pour les exemples react-env --prefix CUSTOM_PREFIX vont des variables de liste blanche comme: CUSTOM_PREFIX_PUBLIC_KEY=my-public-key

• --debug (par défaut: false)

Activer le débogage de React-ENV. Cela enregistrera les variables d'environnement du navigateur chargé dans votre console lors de l'exécution react-env --debug

3.xx Changements de rupture

---

En tant que changement de rupture significatif, nous avons abandonné la possibilité de spécifier des fichiers spécifiques via l'argument --env . Cet argument spécifie désormais le fichier d'environnement à analyser en fonction de l'environnement en cours d'exécution. Par exemple --env APP_ENV ou -e APP_ENV où APP_ENV=staging se lit dans .env.staging . Il est très courant que les plates-formes aient des environnements staging, qa, integration qui sont encore intégrés en mode "Production" avec NODE_ENV=production . Cela permet cette USecase et bien d'autres.

- Vous êtes toujours en mesure de spécifier des fichiers via l'argument --path, -p .

---

Nous avons également abandonné l'ajout de NODE_ENV par défaut car il s'agissait d'un risque de sécurité.

---

Le fichier est maintenant nommé __ENV.js

---

La commande depandand est maintenant dans le format react-env <args> -- <command>