Reagieren Sie eine App, die keine .env-Dateien aufnimmt?

111

Ich verwende die Create React App, um meine App zu booten.

Ich habe zwei .envDateien hinzugefügt .env.developmentund .env.productionim Stammverzeichnis.

Meine .env.developmentbeinhaltet:

API_URL=http://localhost:3000/api
CALLBACK_URL=http://localhost:3005/callback

Wenn ich meine App mit react-scripts startund tröste, process.envspuckt 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, .envaber nicht, wenn ich .env.developmentoder benutze.end.production

shenku
quelle
Können Sie Ihre package.jsonDatei posten ?
Steve Chamaillard
2
process.envist etwas, das das Back-End (Knoten oder was auch immer Sie verwenden) lesen kann. Das Front-End-Bundle hat keine Ahnung, process.envwie 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.
Raul Rene
wahrscheinlich nicht der Fall, aber ich bin ein paar Mal darauf gestoßen und das Problem, das ich gefunden habe, ist, dass wenn mein Computer viel Speicher verwendet, meine .env-Variable nicht geladen wird. Ich benutze Ubuntu 16.4. Versuchen Sie, die Variable vom Terminal zu laden, react-scripts start API_URL=http://localhost:3000/api CALLBACK_URL=http://localhost:3005/callbackwenn 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 .
Femi Oni
@ RaulRene erstellen-reagieren-App behandelt .env sofort, damit Sie keine weitere Konfiguration benötigen
Femi Oni

Antworten:

230

Mit create-react-appmüssen Sie REACT_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

Jamcreencia
quelle
8
Das ist wichtig. Ich habe es verpasst, aber ja, es wird nicht mit dem Präfix funktionieren
Femi Oni
7
Dies funktioniert, wenn ich .envaber nicht für .env.developmentoder .env.production?
Shenku
@ Shenku Haben Sie es geschafft herauszufinden, warum es nur mit .envund nicht mit .env.developmentund funktioniertenv.production
Constantin Chirila
Für Entwickler, die Front-End-Arbeiten ausführen, benötigen Sie ein Webpack, da Sie keine NodeJs im Browser haben ... meh
Stephane
2
Vielen Dank. Ich habe stundenlang nach einer Antwort gesucht.
Fahmid
53

Stellen Sie sicher, dass sich Ihre .env-Datei im Stammverzeichnis befindet und nicht im Ordner src.

Ryan Dhungel
quelle
1
Obwohl ich beim Lesen der Dokumentation gesehen habe, dass sie sich im Stammverzeichnis befinden sollte, konnte ich meine .env-Datei dennoch im Ordner src hinzufügen ... (facepalm) Vielen Dank für Ihre Antwort.
Corné
Ich hatte das gleiche Problem, es funktionierte nicht im src-Ordner, aber es funktionierte nach dem Verschieben in den Stammordner in Version 3.4.3
Vinod Kumar
28

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

JS Peterson
quelle
20

Wenn Sie mehrere Umgebungen wie verwenden möchten .env.development .env.production

Verwenden Sie das Paket dotenv-cli

Hinzufügen .env.developmentund .env.productionim Projektstammordner

und 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

npm run-script build-dev 
Maria Jeysingh Anbu
quelle
ist das dotenvoder dotenv-cli?
Drazen Bjelovuk
2
Das Erstellen verschiedener .env-Dateien für verschiedene Umgebungen wird jetzt auch standardmäßig von den Dokumenten create-react-app: create-react-app unterstützt . Dotenv muss nicht explizit verwendet werden (create-react-app verwendet es tatsächlich hinter den Kulissen, um Umgebungsvariablen zu verarbeiten)
Marnix.hoh
@MariaJeysinghAnbu, diese Syntax gehört dotenv-clinicht dotenv: npmjs.com/package/dotenv-cli
AMS777
@ AMS777 Ich benutze dotenv npm nicht dotenv-cli
Maria Jeysingh Anbu
@MariaJeysinghAnbu, ich wollte verwenden dotenv, bekam aber einen Fehler. Ich habe die Dokumentation überprüft, aber diese -eOption für die Befehlszeile nicht gefunden. Ich fand es jedoch in der dotenv-cliDokumentation. Deshalb habe ich gesagt. Ich benutze endlich env-cmd, nicht gleichzeitig zu haben dotenvund zu dotenv-cliinstallieren, was zu Verwirrung führen kann.
AMS777
10

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.

tim
quelle
1
Vielen Dank, dieser Kommentar hat mich gerettet. Die Create-React-App-Dokumentation hat dies nicht aktualisiert, also habe ich herausgefunden, was falsch ist
CKA
1
Du hast mich hier total gerettet. Ich drehte mich um dieses Ding. Vielen Dank
MDiesel
Jemand gibt diesem Kerl eine Medaille
Rittesh PV
7

Zu diesem Zweck gibt es ein env-cmd- Modul. Installieren Sie über npm npm i env-cmddann in Ihrer package.jsonDatei im scriptsAbschnitt:

  "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:

.env.development
.env.production

Dann schließen Sie sie von der Öffentlichkeit aus. Fügen Sie dazu in Ihrer .gitignoreDatei zwei Zeilen hinzu:

.env.development
.env.production

Dies ist also ein geeigneter Weg, um verschiedene env-Variablen für dev und prod zu verwenden.

Nastro
quelle
versuchen Sie, den vollständigen Pfad zu verwenden, wie: ./node_modules/.bin/env-cmd
Nastro
aber ich empfehle den Ansatz in meiner Antwort nicht. Jetzt weiß ich, dass die Reaktion einen eingebauten Mechaniker gibt, um mit .env
Nastro am
6

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'
Cchapman
quelle
So ein einfacher und doch guter Ort. Ich hatte dasselbe getan und konnte den Wald vor lauter Bäumen nicht sehen. Vielen Dank
Andy Allison
Danke dafür! Ich habe den ganzen Tag gesucht und diesen kleinen Fehler nicht bemerkt :)
chia yongkang
3

Wenn die .envDatei funktioniert , aber .env.developmentoder .env.productionnicht, dann eine leere erstellen .envDatei neben diesen beiden. Ich weiß nicht warum, aber das funktioniert bei mir.

Stjepan Golemac
quelle
0

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

Seewolf
quelle
-1

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).

Christos Tatitzikidis
quelle