Verwenden von Umgebungsvariablen in React.js

Mit Managed Runtime-Umgebungsvariablen können Sie dem in einer Umgebung ausgeführten Anwendungsprozess Variablen hinzufügen, ohne Codeänderungen vornehmen zu müssen. Umgebungsvariablen werden sicher gespeichert, was sie ideal für Anwendungsbeispiele wie Folgendes macht:

  • Aufrufen von Ressourcen von Drittanbietern, die durch API-Schlüssel geschützt sind
  • Bedingtes Ändern des Renderings von React.js

Weitere Informationen finden Sie unter Umgebungsvariablen.

In diesem Tutorial verwenden wir Umgebungsvariablen, um React.js-Rendering zu ändern, ohne den Code zu ändern. Sie greifen auf Umgebungsvariablen über process.env zu, was nur in Node.js und nicht in Browsern verfügbar ist. Das Rendering von PWA Kits ist isomorph, d. h. es wird sowohl auf dem Client als auch auf dem Server gerendert. Um Umgebungsvariablen in React.js zur Verfügung zu stellen, können Sie sie wie in diesem Tutorial gezeigt Ihren PWA Kit-Konfigurationsdateien hinzufügen.

In diesem Beispiel verwenden wir eine Umgebungsvariable, um eine Funktionalität auf Ihrer Website zu aktivieren. So können Sie beispielsweise für eine begrenzte Zeit eine neue Funktionalität wie den Express-Checkout testen. Sie können dann die Interaktion der Käufer mit der Funktionalität überwachen, um ihre Auswirkungen zu verstehen.

Um dieses Tutorial abzuschließen, ist zunächst Folgendes erforderlich:

  • Sorgen Sie für Zugriff auf Managed Runtime und Runtime Admin. Siehe Managed Runtime Administration.
  • Halten Sie einen API-Schlüssel für die Verwendung der Managed Runtime API bereit. Um Ihren API-Schlüssel zu finden, melden Sie sich beim Runtime Admin-Tool an und rufen Sie die Seite Account Settings (Kontoeinstellungen) auf.
  • Stellen Sie sicher, dass Sie über eine Entwickler- oder Administratorrolle für das Projekt verfügen, für das Sie Umgebungsvariablen festlegen. Wenn Sie keinen Zugriff haben, wenden Sie sich eine Person mit Administratorrolle für Managed Runtime, um Ihnen dabei zu helfen.

Ersetzen Sie vor dem Ausführen der Befehle in diesem Tutorial alle Platzhalter durch tatsächliche Werte. Platzhalter haben das folgende Format: $PLACEHOLDER.

Erstellen Sie in Ihrem Projekt den von Ihnen gewählten Content oder die gewünschte Funktionalität. Erstellen Sie zum Beispiel ein Hero-Banner auf Ihrer Startseite.

  1. Um die Umgebungsvariable in der aktuellen Sitzung festzulegen, öffnen Sie ein Terminal, und führen Sie den folgenden Befehl aus:

    • Windows: set ENABLE_FEATURE='true'
    • Die meisten Unix-ähnlichen Betriebssysteme, einschließlich macOS: export ENABLE_FEATURE=‘true’

  2. Überprüfen Sie, ob die Umgebungsvariable korrekt eingerichtet ist, indem Sie Folgendes ausführen:

    • Windows: echo %$ENABLE_FEATURE%
    • Die meisten Unix-ähnlichen Betriebssysteme, einschließlich macOS: echo $ENABLE_FEATURE

    Der Befehl gibt Folgendes zurück: true

  3. Fügen Sie diesen JavaScript-Code zur Konfigurationsdatei in Ihrem Projekt – config/default.js hinzu:

  1. Fügen Sie diesen JavaScript-Code zur Startseite in Ihrem Projekt – app/pages/home/index.jsx hinzu:
  1. Starten Sie den Entwicklungsserver mit npm start und navigieren Sie dann lokal zur Startseite, um zu sehen, wie Ihre Funktionalität gerendert wird.

Es wird empfohlen, diese Schritte in einer Nicht-Production-Umgebung zu testen, bevor Sie Ihre Änderungen in der Produktion bereitstellen.

Ersetzen Sie vor dem Ausführen der Befehle in diesem Tutorial alle Platzhalter durch tatsächliche Werte. Platzhalter haben das folgende Format: $PLACEHOLDER.

  1. Verwenden Sie cURL, um den API-Endpunkt projects_target_env_var_partial_update aufzurufen, und legen Sie einen Funktionalitätsmarker als Umgebungsvariable fest. Dadurch wird Ihr Bündel bereitgestellt. Warten Sie, bis die Umgebung erneut bereitgestellt wurde, bevor Sie die Umgebungsvariable in Ihrem Code verwenden. Sie können auch Runtime Admin verwenden, um Umgebungsvariablen zu verwalten. Siehe Umgebungsvariablen.
  1. Stellen Sie Ihr Bündel von Ihrem lokalen Computer in der von Ihnen gewählten Umgebung bereit.