Ich verwende die Create React App, um meine App zu booten.
Ich habe zwei .env
Dateien hinzugefügt .env.development
und .env.production
im Stammverzeichnis.
Meine .env.development
beinhaltet:
API_URL=http://localhost:3000/api
CALLBACK_URL=http://localhost:3005/callback
Wenn ich meine App mit react-scripts start
und tröste, process.env
spuckt sie aus
{ NODE_ENV: "development", PUBLIC_URL: "" }
Ich habe verschiedene Dinge ausprobiert, aber es werden einfach nicht die Überprüfungen in meiner Entwicklungsdatei erfasst. Was mache ich falsch?!
Die Struktur der Direktiven lautet:
/.env.development
/src/index.js
Das Skript Package.json lautet:
"start": "export PORT=3005; npm-run-all --parallel server:start client:start",
"client:start": "export PORT=3005; react-scripts start",
"server:start": "node server.js",
"build": "react-scripts build",
Bearbeiten:
@jamcreencia richtig darauf hingewiesen , meine Variablen sollte vorangestellt werden , mit REACT_APP
.
Bearbeiten 2
Es funktioniert in Ordnung, wenn ich die Datei benenne, .env
aber nicht, wenn ich .env.development
oder benutze.end.production
reactjs
create-react-app
shenku
quelle
quelle
package.json
Datei posten ?process.env
ist etwas, das das Back-End (Knoten oder was auch immer Sie verwenden) lesen kann. Das Front-End-Bundle hat keine Ahnung,process.env
wie es im Browser ausgeführt wird. Sie können das Webpack so konfigurieren, dass es beim Bündeln im Bundle übergeben wird, oder Sie können es noch einfacher vom Back-End in der Indexdatei übergeben, die Sie als globale Variable rendern.react-scripts start API_URL=http://localhost:3000/api CALLBACK_URL=http://localhost:3005/callback
wenn Sie sie immer noch nicht sehen. Ich würde mein System neu starten, um die Speichernutzung zu verringern, und es erneut versuchen. In der Regel wird dies für mich behoben .Antworten:
Mit
create-react-app
müssen SieREACT_APP_
dem Variablennamen ein Präfix voranstellen , um darauf zugreifen zu können.Beispiel:
REACT_APP_API_URL=http://localhost:3000/api REACT_APP_CALLBACK_URL=http://localhost:3005/callback
Weitere Informationen finden Sie hier
quelle
.env
aber nicht für.env.development
oder.env.production
?.env
und nicht mit.env.development
und funktioniertenv.production
Stellen Sie sicher, dass sich Ihre .env-Datei im Stammverzeichnis befindet und nicht im Ordner src.
quelle
Hatte das gleiche Problem! Die Lösung bestand darin, die Verbindung zu meinem Knotenserver zu schließen (dies ist mit STRG + C möglich). Starten Sie dann Ihren Server mit 'npm run start' neu und .env sollte ordnungsgemäß funktionieren.
Quelle: Github
quelle
Wenn Sie mehrere Umgebungen wie verwenden möchten
.env.development
.env.production
Verwenden Sie das Paket dotenv-cli
Hinzufügen
.env.development
und.env.production
im Projektstammordnerund dein package.json
"scripts": { "start": "react-app-rewired start", "build-dev": "dotenv -e .env.development react-app-rewired build", "build-prod": "dotenv -e .env.production react-app-rewired build", "build": "react-app-rewired build", "test": "react-app-rewired test --env=jsdom", "eject": "react-scripts eject" },
dann entsprechend der Umgebung wie bauen
quelle
dotenv
oderdotenv-cli
?dotenv-cli
nichtdotenv
: npmjs.com/package/dotenv-clidotenv
, bekam aber einen Fehler. Ich habe die Dokumentation überprüft, aber diese-e
Option für die Befehlszeile nicht gefunden. Ich fand es jedoch in derdotenv-cli
Dokumentation. Deshalb habe ich gesagt. Ich benutze endlichenv-cmd
, nicht gleichzeitig zu habendotenv
und zudotenv-cli
installieren, was zu Verwirrung führen kann.In Bezug auf env-cmd . Gemäß VMois 'freundlichem Beitrag auf gitHub wurde env- cmd aktualisiert (Version 9.0.1 zum Zeitpunkt des Schreibens). Umgebungsvariablen funktionieren in Ihrem React- Projekt wie folgt :
"scripts": { "build:local": "env-cmd -f ./.env.production.local npm run build", "build:production": "env-cmd -f ./.env.production npm run build" }
In Ihrer package.json- Datei.
quelle
Zu diesem Zweck gibt es ein env-cmd- Modul. Installieren Sie über npm
npm i env-cmd
dann in Ihrerpackage.json
Datei imscripts
Abschnitt:"scripts": { "start": "env-cmd .env.development react-scripts start", "build": "GENERATE_SOURCEMAP=false env-cmd .env.production react-scripts build", }
In Ihrem Projektstamm müssen Sie zwei Dateien mit denselben env-Variablen, aber unterschiedlichen Werten erstellen:
Dann schließen Sie sie von der Öffentlichkeit aus. Fügen Sie dazu in Ihrer
.gitignore
Datei zwei Zeilen hinzu:Dies ist also ein geeigneter Weg, um verschiedene env-Variablen für dev und prod zu verwenden.
quelle
Ich hatte das gleiche Problem, aber es lag daran, dass ich meine .env- Datei im YAML-Format anstelle von JS hatte.
Es war
REACT_APP_API_PATH: 'https://my.api.path'
aber es musste sein
REACT_APP_API_PATH = 'https://my.api.path'
quelle
Wenn die
.env
Datei funktioniert , aber.env.development
oder.env.production
nicht, dann eine leere erstellen.env
Datei neben diesen beiden. Ich weiß nicht warum, aber das funktioniert bei mir.quelle
Und denken Sie daran, nach dem API-Schlüssel in der env-Datei kein Semikolon zu haben.
REACT_APP_API_KEY = 'ae87cec695cc4heheh639d06c9274a';
sollte sein
REACT_APP_API_KEY = 'ae87cec695cc44heheh1639d06c9274a'
das war mein fehler
quelle
Ab den neuesten React-Skripten (3.2.0) ist es einfach zu sagen
PORT=4000 BROWSER=none
in Ihrer .env- oder .env.development-Datei (..etc), die sich im Stammordner befinden soll.
Es funktioniert NICHT mit dem Präfix REACT_APP (die Dokumente sind vermutlich veraltet) und es sind KEINE zusätzlichen npm-Pakete erforderlich (React-Skripte enthalten bereits dotenv 6.2.0).
quelle