Übersicht über PWA Kit
In dieser Übersicht erhalten Sie eine kurze Einführung in die wichtigsten Teile der PWA Kit-Architektur sowie hilfreichen Kontext für den Rest der Produktdokumentation.
Die Retail React App ist eine serverseitig gerenderte React App, die für E-Commerce optimiert ist. Sie ist der Ausgangspunkt für den Aufbau Ihrer Storefront und enthält bereits Schlüsselfunktionalitäten wie:
- Codebündelung, Codeaufteilung und Transpilierung
- Komponentenbibliothek mit Theming
- JavaScript-basiertes Style-System (CSS in JS)
- Skripts für die Automatisierung von routinemäßigen Entwicklungsaufgaben
- Service Worker und Manifest für Progressive Web App (PWA)-Funktionalitäten
- Testsuiten
Die Storefront der Retail React App enthält Standard-E-Commerce-Seiten und -Funktionalitäten wie die Produktlistenseite (PLP), Produktdetailseite (PDP), Warenkorb und Checkout. Jeder Aspekt der Storefront ist so designt, dass Sie ihn mit Ihrem eigenen Code verbessern und erweitern können.
Näheres finden Sie in der vollständigen Anleitung zur Architektur → Die Retail React App.
Für das bestmögliche Käufererlebnis setzen PWA Kit-Storefronts auf ein System für Rendering und Routing, dass in zwei verschiedenen Kontexten den gleichen Quellcode ausführt: auf der Serverseite und auf der Clientseite. Das serverseitige Rendering optimiert die anfängliche Seitenladegeschwindigkeit, während das clientseitige Rendering eine responsive Benutzeroberfläche und fließende Seitenübergänge ermöglicht.
Das Rendering- und Routing-System wird von der Retail React App mit ihrer Express-Serverkonfiguration und einer Hierarchie von React-Komponenten eingerichtet. Dieses System bietet Ihnen folgende Funktionalitäten:
- Hinzufügen neuer Seitenkomponenten und Modifizierung bestehender Seitenkomponenten
- Datenbereitstellung für Seitenkomponenten über API-Anfragen oder Benutzerinteraktionen
- Definition von Mustern für das Routing von URL-Anfragen an Seitenkomponenten
- Anpassung der Ausgabe aller Seiten
Näheres finden Sie in den vollständigen Anleitungen zur Architektur → Rendering und Routing.
Das PWA Kit ist ein auf GitHub gehostetes Open-Source-Projekt.
Das GitHub-Repository für PWA Kit ist als Monorepo mit mehreren Paketen eingerichtet, darunter Bibliotheken, Projektvorlagen, SDKs und andere Tools.
Um die Navigation im Repository zu erleichtern, finden Sie hier einen Überblick über die einzelnen Pakete, die es enthält:
| Paket | Beschreibung |
|---|---|
| commerce-sdk-react | Bibliothek mit React-Hooks zum Abrufen von Daten aus Salesforce B2C Commerce. |
| internal-lib-build | Interne Tools, die von anderen Paketen im pwa-kit-Repository verwendet werden. |
| pwa-kit-create-app | Tool zum Erstellen von PWA Kit-Projekten auf Basis von Projektvorlagen. |
| pwa-kit-dev | Befehlszeilentool zur Entwicklung, Erstellung und Bereitstellung von PWA Kit-Projekten. |
| pwa-kit-react-sdk | Bibliothek mit Komponenten und Dienstprogrammen zur Unterstützung der Rendering-Pipeline. |
| pwa-kit-runtime | Bibliothek von Laufzeitumgebungen, die Node.js-Anwendungen die Ausführung auf Managed Runtime ermöglichen. |
| template-express-minimal | Standard-Projektvorlage für Anwendungen, die auf Managed Runtime ausgeführt werden. |
| template-retail-react-app | Projektvorlage, die eine isomorphe JavaScript-Storefront enthält. |
| template-typescript-minimal | Projektvorlage ohne Konfiguration für TypeScript-Anwendungen, die mit PWA Kit-SDKs erstellt wurden. |