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.

Voraussetzungen

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.

Auf Ihrem lokalen Computer

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

Voraussetzung für lokale Tests

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.

Lokales Testen der Umgebungsvariablen

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’
Ü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
Fügen Sie diesen JavaScript-Code zur Konfigurationsdatei in Ihrem Projekt – config/default.js hinzu:

1function parseEnvVar(envVarName) {
2  const val = process.env[envVarName];
3  if (val === undefined) {
4    throw new Error(`Environment variable ${envVarName} is required.`);
5  }
6  try {
7    return JSON.parse(val);
8  } catch (err) {
9    throw new Error(
10      `Environment variable ${envVarName} must be a valid JSON string.`
11    );
12  }
13}
14module.exports = {
15  app: {
16    enableFeature: parseEnvVar("ENABLE_FEATURE") || false,
17  },
18};

Fügen Sie diesen JavaScript-Code zur Startseite in Ihrem Projekt – app/pages/home/index.jsx hinzu:

1import { getConfig } from "@salesforce/pwa-kit-runtime/utils/ssr-config";
2
3const Home = () => {
4  const config = getConfig();
5  const enableFeature = config.app.enableFeature;
6  return enableFeature && <h1>My New Feature</h1>
7};
8
9export default Home;

Starten Sie den Entwicklungsserver mit npm start und navigieren Sie dann lokal zur Startseite, um zu sehen, wie Ihre Funktionalität gerendert wird.

In einer Nicht-Production- oder Production-Umgebung

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