react env
3.1.0
Populiert Ihre Umgebung von .env Dateien eher zur Laufzeit als zu erstellen .
.env -Dateien. Dieses Paket generiert eine __ENV.js Datei aus mehreren .env Dateien, die Variablen für weißgelistete Umgebungen enthält, die ein REACT_APP_ Präfix haben.
< script src =" /public/__ENV.js " /> Im Browser sind Ihre Variablen im window.__ENV.REACT_APP_FOO und auf dem process.env.REACT_APP_FOO . Wir haben eine Helferfunktion aufgenommen, um das Abrufen von Wert zu erleichtern:
# .env
REACT_APP_NEXT= " Next.js "
REACT_APP_CRA= " Create React App "
REACT_APP_NOT_SECRET_CODE= " 1234 "wird ...
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 >
) ;Wir haben einige vernünftige Standardeinstellungen implementiert, die die folgende Prioritätsreihenfolge haben:
{path-to-file} // from the --path, -p argument.env.{key} // from the --env, -e argument.env.local.env Ihre Konfiguration ist im Browser und im process.env erhältlich. Wir empfehlen, .env.local zu .gitignore .
Frameworks wie als nächstes ermöglichen einige nette Standardeinstellungen wie .env.local, .env.production, .env . Dies hat die Einschränkung, in der Sie Ihre App in verschiedenen Umgebungen wie "Staging, Integration, QA" ausführen möchten, aber dennoch eine "Produktion" -App mit NODE_ENV=production erstellen. Mit React-Env ist dies möglich:
# .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 " Für die Inszenierung würden Sie einfach APP_ENV=staging festlegen, wo Sie Ihre App ausführen:
{
...
"scripts": {
"start": "react-env --env APP_ENV -- next start" // where .env.${APP_ENV}
}
...
}
So REACT_APP_API_HOST=api.staging.com in Ihrer Staging -Umgebung.
Bitte denken Sie daran, dass Sie den Namen einer Umgebungsvariablen an
--env, nicht den Wert davon übergeben müssen.
- ✔ Gültige Verwendung (macOS):
APP_ENV=staging react-env --env APP_ENV -- next start- Häufiger Fehler:
react-env --env staging -- next start
Sie können auch den Pfad zu einer bestimmten Env -Datei angeben:
{
...
"scripts": {
"start": "react-env --path config/.env.defaults -- next start"
}
...
}
Sie können eine beliebige Kombination dieser beiden Argumente zusammen mit der Standardeinstellung .env, .env.local verwenden, um Ihre Laufzeitkonfiguration zu erstellen.
Sie können auch das Präfix der weißen Umgebungsvariablen angeben:
{
...
"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 " Sie müssen die Variable REACT_ENV_PREFIX env vor dem Befehl hinzufügen, wenn Sie env() während Ihrer Tests verwenden:
{
...
"scripts": {
"test": "REACT_ENV_PREFIX=NEXT_APP jest --maxWorkers=3"
}
...
}
Es ist möglich, dieses Paket als ENTRYPOINT -Skript in einer Dockerfile zu verwenden. Dadurch wird Ihre __ENV.js -Konfigurationsdatei generiert, wenn der Container startet, und können Ihre package.json -Skripte unverändert bleiben. Natürlich muss node -Binär in Ihrem Behälter vorhanden sein.
FROM node:alpine
ENTRYPOINT yarn react-env --env APP_ENV
CMD yarn start$ react-env < args > -- < command ><command> Sie können einen Befehl wie eine NodeJS-Eintragsdatei an das react-env CLI-Tool übergeben. Zum Beispiel react-scripts , next dev , next start
--env , -e (Standard: null) Geben Sie den Namen einer vorhandenen Umgebungsvariablen an, deren Wert der Name einer gewünschten Umgebung ist, um React-Env ein umgebungsspezifisches Env-File zu analysieren. Zum Beispiel können Sie zuerst APP_ENV=staging festlegen und dann anwenden --env APP_ENV Flag. React-Env würde laden .env.staging, .env.local, .env in dieser Reihenfolge, wobei letztere Priorität haben.
--path , -p (Standard: NULL) Geben Sie eine bestimmte Env-Datei an, um EG react-env --path .env.testing würde laden .env.testing, .env.local, .env in dieser Reihenfolge, wobei letztere Priorität haben. Eine Kombination aus --env APP_ENV --path testing .env.testing, .env.staging, .env.local, .env wobei APP_ENV=staging lädt.
--dest , -d (Standard: ./public) Ändern Sie das Standardziel für die Generierung der Datei __ENV.js .
--prefix (Standard: react_app) Ändern Sie das Standardpräfix für weiß gelistete Env-Variablen. Für Exemple react-env --prefix CUSTOM_PREFIX werden Variablen aus Weißlisten wie: CUSTOM_PREFIX_PUBLIC_KEY=my-public-key
--debug (Standard: Falsch) Aktivieren Sie das Debuggen für React-Env. Dadurch log das geladene Browser-Umgebungsvariablen in Ihre Konsole bei der Ausführung react-env --debug Ihre Konsole
Als signifikante Veränderung haben wir die Möglichkeit, bestimmte Dateien über das Argument --env anzugeben, gesenkt. Dieses Argument gibt nun an, dass die Umgebungsdatei abhängig von der laufenden Umgebung analysiert wird. Zum Beispiel --env APP_ENV oder -e APP_ENV wobei APP_ENV=staging in .env.staging liest. Es ist sehr häufig, dass Plattformen in staging, qa, integration , die in der "Produktion" mit NODE_ENV=production noch im "Produktionsmodus" integriert sind, aufweisen. Dies ermöglicht diese und viele andere.
-Sie sind weiterhin in der Lage, Dateien über das Argument --path, -p anzugeben.
Wir haben standardmäßig auch NODE_ENV hinzugefügt, da dies ein Sicherheitsrisiko war.
Die Datei heißt jetzt __ENV.js
Der Befehl depandand befindet sich jetzt im Format react-env <args> -- <command>
