Konfigurationsdateien

Mithilfe von Konfigurationsdateien lassen sich viele Aspekte der Funktionsweise Ihrer PWA Kit-Anwendung anpassen, einschließlich: API-Zugriff, URL-Formatierung, Handhabung mehrerer Websites, Proxy-Vorgang für Anfragen sowie serverseitiges Rendering.

Eine Konfigurationsdatei kann in JavaScript, YAML oder JSON geschrieben sein. Die folgenden Dateierweiterungen werden unterstützt: .js, .yml, .yaml und .json.

Wenn ein PWA Kit-Projekt mit der Retail React App-Vorlage erstellt wird, hat es eine einzelne Konfigurationsdatei: app/config/default.js. Die exportierten Konfigurationsobjekte werden auf Grundlage der pwa-kit-create-app bereitgestellt. Sie können Ihre Konfiguration jedoch jederzeit aktualisieren. Oft sind nach der anfänglichen Projekterstellung Aktualisierungen erforderlich, damit das Projekt mit Änderungen an B2C Commerce-Instanzen synchron bleibt.

Zur Unterstützung des isomorphen Renderings werden die Konfigurationswerte zu einer Seite serialisiert. Nehmen Sie keine Geheimnisse in Ihre Konfiguration auf!

Sie können default.js ersetzen oder mit zusätzlichen Konfigurationsdateien ergänzen, da PWA Kit umgebungsspezifische Konfigurationen unterstützt, die später in diesem Leitfaden behandelt werden.

Sehen wir uns zunächst einmal die einzelnen Konfigurationsobjekte und -eigenschaften von default.js oder jeder anderen Konfigurationsdatei an.

Der Projektstring, der Ihre Anwendung mit Managed Runtime verknüpft, ist nicht Teil einer Konfigurationsdatei. Er befindet sich in der Eigenschaft name oben in der package.json-Datei im Stamm Ihres Projektverzeichnisses. Nach der anfänglichen Projekterstellung können Sie den Wert von name so ändern, dass er zur Projekt-ID in Runtime Admin passt.

Vor Version 1.5.0 des PWA Kits befanden sich diese Einstellungen in app/api.config.js.

Um den Zugriff auf die B2C Commerce API und die Open Commerce API (OCAPI) zu konfigurieren, können Sie das Objekt app.commerceAPI bearbeiten, das aus der Konfigurationsdatei exportiert wird.

Hier ist ein kommentierter Codeschnipsel mit Beispielwerten:

Um den Zugriff auf die Einstein API zu konfigurieren, können Sie das Objekt app.einsteinAPI bearbeiten.

Hier ist ein weiterer kommentierter Codeschnipsel mit Beispielwerten:

Zusätzliche Informationen zu der CommerceAPI-Klasse, die das Konfigurationsobjekt im vorherigen Codeschnipsel verbraucht, finden Sie in unserer Architekturanleitung zur Retail React App.

Zusätzliche Informationen zu den Setup-Aktionen in Account Manager und Business Manager für die Aktivierung des API-Zugriffs für eine B2C Commerce Instanz finden Sie in unserer Anleitung zur Einrichtung des API-Zugriffs.

Im Objekt app.url können Sie anpassen, wie Storefront-URLs formatiert werden.

Standardmäßig ist der Objekt app.url mit den folgenden Werten konfiguriert:

Mit diesen Standardeinstellungen werden sowohl die aktuelle Website als auch das Gebietsschema im URL-Pfad angezeigt.

Sie können auswählen, wie und ob das aktuelle Gebietsschema in der URL angezeigt werden soll, indem Sie für url.locale einen der folgenden Werte festlegen:

path: Das Gebietsschema ist im URL-Pfad enthalten. Bespiel: /en-US/women/dress
query_param: Das Gebietsschema ist als Abfrageparameter enthalten. Bespiel: /women/dress?locale=en-US
none: Das Gebietsschema ist nicht in der URL enthalten. Bespiel: /women/dress

url.showDefaults: Mit diesem booleschen Wert wird bestimmt, ob die Werte der Standard-Website oder des Gebietsschemas in der URL angezeigt werden. Der Standardwert ist "falsch".

Wir extrahieren die für Ihre Anwendung konfigurierten Websites in eine eigene Datei mit dem Namen config/sites.js. Diese Datei wird in jede Konfigurationsdatei importiert und dann im app-Objekt exportiert. Indem Sie die Dateien so trennen, können Sie die von Ihrer Anwendung unterstützten Websites und die im Backend Ihres Business Managers definierten Dateien einfacher synchronisieren. (Sie können Ihre Websites direkt in der Konfigurationsdatei definieren, wenn Sie dies bevorzugen.)

Das app-Objekt enthält auch andere Einstellungen für das Verwalten mehrerer Websites und der entsprechenden Aliasse. Diese Einstellungen werden in unserer Anleitung zum Thema Mehrere Websites eingehend behandelt.

Der Proxy-Vorgang für Anfragen wird im ssrParameters.proxyConfigs-Array konfiguriert. Das Thema wird in unserer Anleitung zu Proxy-Anfragen eingehend behandelt.

Vor Version 1.5.0 des PWA Kits befanden sich diese Einstellungen in package.json.

Die folgende Tabelle enthält die Konfigurationsoptionen für das serverseitige Rendering. Diese Optionen sind nicht Teil des app-Objekts und werden als individuelle Eigenschaften des exports-Hauptobjekts ausgedrückt.

Eigenschaft	Beschreibung
`ssrParameters.ssrFunctionNodeVersion`	Die Zeichenfolge legt fest, welche Node-Version für die Ausführung des App-Servers verwendet wird. Zulässige Werte: `16.x`.
`ssrEnabled`	Boolesche Variable, die die Erstellung der für das serverseitige Rendering erforderlichen Dateien aktiviert oder deaktiviert. Die Einstellung `false` ist für diesen Wert seit August 2021 veraltet.
`ssrOnly`	Array von Glob-Ausdrücken, wobei `` ein Platzhalter ist, der null oder mehr Instanzen jedes beliebigen Zeichens enthält. Bestimmt, welche Dateien ausschließlich für das serverseitige Rendering-System und nicht* über den Pfad `/mobify/bundle/` verfügbar sind. Standardeinstellungen für ein neu erstelltes Projekt: `['ssr.js', 'ssr.js.map', 'node_modules/*/.*']`
`ssrShared`	Array von Glob-Ausdrücken, wobei `` ein Platzhalter ist, der null oder mehr Instanzen jedes beliebigen Zeichens enthält. Bestimmt, welche Dateien ausschließlich für das serverseitige Rendering-System und* über den Pfad `/mobify/bundle/` verfügbar sind. Standardeinstellungen für ein neu erstelltes Projekt:

Sie können mehrere Konfigurationsdateien in das Verzeichnis app/config/ aufnehmen, einschließlich Konfigurationsdateien für bestimmte Umgebungen.

Umgebungsspezifische Konfigurationen können Ihre Bereitstellungen effizienter und flexibler machen. Sie haben beispielsweise folgende Möglichkeiten:

Stellen Sie ein einzelnes Bündel in mehreren Managed Runtime-Umgebungen bereit und stellen Sie für jede dieser Umgebungen eine Verbindung zu einer anderen B2C Commerce-Instanz her.
Stellen Sie während der lokalen Entwicklung eine Verbindung zu Ihrer eigenen On-Demand-Sandbox her, aber stellen Sie eine Verbindung zu anderen Instanzen her, wenn Sie diese auf Managed Runtime bereitstellen.

Um eine umgebungsspezifische Konfigurationsdatei zu erstellen, folgen Sie den gleichen Konventionen wie in default.js, verwenden aber den Namen der Zielumgebung als Basisnamen der Datei. Verwenden Sie eines der unterstützten Dateiformate und die entsprechende Dateierweiterung. Beispiele: production.js, staging.json.

Eine PWA Kit-Anwendung wählt die richtige zu ladende Konfigurationsdatei aus, indem sie app/config durchsucht und die folgenden Fragen in der folgenden Reihenfolge stellt:

Gibt es eine Datei, deren Name der aktuell auf Managed Runtime ausgeführten Umgebung entspricht?
Wenn sie lokal ausgeführt wird, gibt es eine Datei mit dem Namen local in einem unterstützten Dateiformat?
Wenn noch keine Konfigurationsdatei gefunden wurde, gibt es eine Datei mit dem Namen default in einem unterstützten Dateiformat?

Sobald die Antwort auf eine dieser Fragen "Ja" lautet, sucht PWA Kit nicht weiter und lädt die betreffende Datei.

Haben zwei Dateien den gleichen Dateinamen, aber unterschiedliche Dateierweiterungen, wird die Datei mit der Erweiterung mit dem höchsten zugewiesenen Vorrang ausgewählt. Die unterstützten Dateierweiterungen haben die folgende Rangfolge, vom größten bis zum geringsten Vorrang: .js, .yml, .yaml oder .json. Das bedeutet, dass PWA Kit bei der Wahl zwischen default.js und default.json default.js laden würde, da die Datei höher in der Rangfolge steht.