Umgebungsvariablen in React-Projekten

Moderne Webanwendungen machen intensiven Gebrauch von verschiedenen Arten von APIs. Damit sie funktionieren, benötigen sie Schlüssel oder andere Informationen, um jede API-Nutzung zu identifizieren und zu verfolgen. Das Halten von API-Schlüsseln ist eine der vielen Anwendungen von Umgebungsvariablen. Im Allgemeinen besteht ihr Hauptzweck darin, Anmeldeinformationen zu speichern, die für die Webentwicklung unerlässlich sind. Es gibt Anwendungsentwicklern auch einen einzigen Platz, um die Konfigurationsdaten bei Bedarf anzupassen. Auf diese Weise müssen Sie nicht jede Instanz von Konfigurationsdaten manuell suchen und bearbeiten.

Anfangs können die Umgebungsvariablen von React verwirrend sein, insbesondere für diejenigen, die keine Back-End-Erfahrung haben. Entwickler, die an umfangreichen Anwendungen arbeiten möchten, sollten sich jedoch mit Umgebungsvariablen vertraut machen.

Regeln für React-Umgebungsvariablen

Beachten Sie, dass die in Umgebungsvariablen gespeicherten Werte nicht privat sind. Sie sind beispielsweise nicht zum Speichern von geheimen API-Schlüsseln geeignet. Sobald Ihre App bereitgestellt wurde, sind die Werte der Umgebungsvariablen im Quellcode sichtbar. Jedes Mal, wenn Sie eine Umgebungsvariable hinzufügen, müssen Sie Ihre Anwendung neu starten, bevor Sie auf den darin gespeicherten Wert verweisen.

Umgebungsvariablen in create-react-app

React-Projekte, die mit create-react-app mit der react-scripts-Version @0.5.0 oder höher erstellt wurden, unterstützen Umgebungsvariablen, sodass kein externes Paket erforderlich ist.

Solange Sie die neueste Version des Pakets create-react-app installiert haben, müssen Sie lediglich eine Datei .env.local im Hauptverzeichnis erstellen (derselbe Ordner, der auch README.md, package.json und andere Dateien enthält) und diese verwenden, um die Variablen zu definieren. Hier ist ein Beispiel:

REACT_APP_CREDENTIAL_DATA = 'some-credential-data'

Die Erweiterung .env.local ist notwendig, damit die Datei beim Initialisieren des Projekts automatisch der Datei .gitignore hinzugefügt wird.

Um die eingebaute Unterstützung von create-react-app für Umgebungsvariablen zu nutzen, müssen Sie den Variablennamen REACT_APP voranstellen.

Umgebungsvariablen ohne create-react-app

Wenn Sie eine benutzerdefinierte React-Umgebung ohne react-scripts haben, müssen Sie ein externes Paket installieren, um Umgebungsvariablen in React zu verwenden.

Zu diesem Zweck können Sie ein speziell für diesen Zweck erstelltes, beliebtes dotenv Paket installieren.

Zuerst müssen Sie die Befehlszeile im Projektordner öffnen und dieses Paket installieren:

npm install dotenv

Anschließend müssen Sie es zur Verfügung stellen und die Einstellungen konfigurieren. Fügen Sie der App den folgenden Code hinzu:

require('dotenv').config()

Sobald Sie dies getan haben, können Sie im Ordner eine Datei .env.local erstellen, genau wie bei den Apps, die mit create-react-app erstellt wurden. Sie müssen auch Variablennamen mit dem Präfix REACT_APP beginnen.