Présentation de PWA Kit

Voici une courte présentation des principales parties de l'architecture de PWA Kit ainsi qu'une mise en contexte utile pour le reste de la documentation du produit.

L'application Retail React App est une application React rendue côté serveur, optimisée pour l'e-commerce. Elle vous donne un point de départ pour construire votre boutique et comprend déjà des fonctionnalités essentielles, telles que :

  • Le paquetage, le fractionnement et la transpilation de code
  • Une bibliothèque de composants avec des thèmes
  • Un système de style basé sur JavaScript (CSS in JS)
  • Des scripts pour l'automatisation des tâches de développement de routine
  • Un service worker et un manifeste pour les fonctionnalités de Progressive Web App (PWA)
  • Suites de tests

La boutique de Retail React App comprend des pages et des fonctionnalités d'e-commerce standard, telles que la page de liste des produits (PLP), la page de détails des produits (PDP), le panier et le checkout. Chaque aspect de la boutique est conçu pour être amélioré et étendu avec votre propre code.

Pour en savoir plus, lisez le guide d'architecture complet → Retail React App.

Pour une expérience d'achat optimale, les boutiques PWA Kit utilisent un système de rendu et de routage qui exécute le même code source dans deux contextes différents : côté serveur et côté client. Le rendu côté serveur optimise la vitesse de chargement initiale des pages, tandis que le rendu côté client permet d'obtenir une interface utilisateur réactive et des transitions de page fluides.

Le système de rendu et de routage est établi par l'application React Retail App avec sa configuration de serveur Express et une hiérarchie de composants React. Dans ce système, vous pouvez :

  • Ajouter de nouveaux composants de page et modifier des composants de page existants
  • Fournir des données aux composants de page à partir de requests API ou d'interactions avec l'utilisateur
  • Définir des schémas pour le routage des requests URL vers les composants de la page
  • Personnaliser la sortie de toutes les pages

Pour en savoir plus, lisez les guides d'architecture complets → Rendu et Routage.

Le PWA Kit est un projet open source hébergé sur GitHub.

Le référentiel GitHub pour PWA Kit est configuré comme un référentiel unique (monorepo) avec plusieurs paquets, notamment des bibliothèques, des modèles de projet, des SDK et d’autres outils.

Pour vous aider à naviguer dans le référentiel, voici un aperçu de chacun des paquets qu’il contient :

PaquetDescription
commerce-sdk-reactBibliothèque de hooks React permettant de récupérer les données de Salesforce B2C Commerce.
internal-lib-buildOutils internes utilisés par d’autres paquets du référentiel pwa-kit.
pwa-kit-create-appOutil permettant de générer des projets PWA Kit sur la base de modèles de projets.
pwa-kit-devOutil de ligne de commande pour développer, générer et déployer des projets PWA Kit.
pwa-kit-react-sdkBibliothèque de composants et d’utilitaires qui prend en charge le pipeline de rendu.
pwa-kit-runtimeBibliothèque d’environnements d’exécution qui permettent aux applications Node.js de s’exécuter sur Managed Runtime.
template-express-minimalModèle de projet minimaliste pour les apps fonctionnant sur Managed Runtime.
template-retail-react-appModèle de projet incluant une boutique JavaScript isomorphe.
template-typescript-minimalModèle de projet sans configuration pour les applications TypeScript créées avec les SDK de PWA Kit.