Die .env-Datei wird auch Umgebungsvariablen genannt und ermöglicht es eure React Anwendung zu konfigurieren, ohne den Quellcode ändern zu müssen. Zudem ist eine .env-Datei in React eine einfache und effektive Möglichkeit, um sensible Daten sicher zu speichern. Die Daten tauchen dann nämlich nicht direkt im Quellcode auf.
Es ist wichtig zu beachten, dass das „.env“ Dateiformat nicht von Natur aus in JavaScript unterstützt wird. Ihr benötigen eine Bibliothek wie „dotenv“ oder „dotenv-flow“, um die Umgebungsvariablen aus der „.env“ Datei zu laden und in eurem Code verfügbar zu machen. Diese Bibliotheken könnt Ihr in eurem Projekt installieren und importieren, um die Umgebungsvariablen zu laden.
Projekte die mit create-react-app erstellt wurden, können schon mit .env Dateien umgehen. Es ist kein Import einer zusätzlichen Bibliothek nötig. Allerdings müssen die Variablen mit REACT_APP beginnen
Wichtig ist zudem, dass die sensiblen Daten der .env-Datei nicht in öffentliche Repositories wie Github, Gitlab, usw. hochgeladen werden. Daher sollte die .env-Datei in die .gitignore des Projektes aufgenommen werden, dann wird sie automatisch vom Upload zum Repository ausgeschlossen.
Im Grunde ist die .env-Datei eine einfache Textdatei, die Variablen enthält, die dann im Projekt verwendet werden können. Der Aufbau der Datei ist kann z.B. so aussehen:
REACT_APP_URL=http://localhost:5000
REACT_APP_USER="ADMIN_USER"
REACT_APP_PASSWORD="ADMIN_PASSWORT"Innerhalb eures React Projektes erfolgt der Zugriff über das Objekt process.env. Wie bereits erwähnt, ist hierfür kein import einer Komponente nötig, sofern ihr das React Projekt per create-react-app erstellt habt.
- 【Makeblock mBot 2】 Als MINT-Spielzeug mBot 2drei Stufen: Bauen, Kognition und Kreation. Dieser…
- 【Mehr Funktionen, mehr Spaß】 Neben den Grundfunktionen wie Linienverfolgung,…
Letzte Aktualisierung am 17.01.2025 / Affiliate Links / Bilder von der Amazon Product Advertising API
Möchtet ihr also z.B. einen Link erstellen, der auf der Variable REACT_APP_URL basiert, würdet ihr folgenden Code verwenden:
<a href={process.env.REACT_APP_URL} />Beachtet dabei, dass die .env-Datei nur beim Laden/Starten des Projektes geladen wird, also z.B. beim npm start. Ändert ihr also Werte in der Datei, müsst ihr folgerichtig das Projekt in node.js neu starten.
Praktisch ist die .env-Datei auch, wenn es darum geht zwischen Entwicklungsversion (die ja meistens mit localhost arbeitet) und Produktivversion zu wechseln. Ihr legt euch dann einfach zwei Variablen an und kommentiert die derzeit nicht benötigte aus. So wie hier:
# dev Variable
REACT_APP_URL=http://localhost:5000
# prod Variable
# REACT_APP_URL=http://meinecooledomain:5000Die Datei muss, damit sie auch wirklich funktioniert, im Hauptverzeichnis des Projekts liegen. Mir ist es oft genug passiert, dass ich sie im src Ordner angelegt habe und mich gewundert habe, warum es nicht funktioniert. Damit euch nicht das Gleiche passiert, hier nochmal als Screenshot 😀
Zudem findet ihr eine vollständige Beschreibung auf der Webseite des create-react-app Projekts:
https://create-react-app.dev/docs/adding-custom-environment-variables/