PWA Kit Overview
This overview briefly introduces the main parts of the PWA Kit architecture and provides you with helpful context for the rest of the product documentation.
The Retail React App is a server-side rendered React app that’s optimized for ecommerce. It gives you a starting point for building your storefront that already includes key features, such as:
- Code bundling, code splitting, and transpilation
- Component library with theming
- JavaScript-based styling system (CSS in JS)
- Scripts for automating routine development tasks
- Service worker and manifest for Progressive Web App (PWA) features
- Test suites
The Retail React App’s storefront includes standard ecommerce pages and functionality, such as product listing page (PLP), product details page (PDP), cart, and checkout. Every aspect of the storefront is designed to be enhanced and extended with your own code.
To learn more, read the full architecture guide → The Retail React App.
For the best possible shopper experience, PWA Kit storefronts use a system for rendering and routing that runs the same source code in two different contexts: on the server side and on the client side. Server-side rendering optimizes for initial page loading speed, while client-side rendering enables a responsive user interface and smooth page transitions.
The rendering and routing system is established by the Retail React App with its Express server configuration and a hierarchy of React components. Within this system, you can:
- Add new page components and modify existing page components
- Supply data to page components from API requests or from user interaction
- Define patterns for routing URL requests to page components
- Customize the output of all pages
To learn more, read the full architecture guides → Rendering and Routing.
PWA Kit storefronts use Einstein Activities to enhance user experiences and provide reporting data in Reports & Dashboards.
To enable Einstein Activity based reporting in Report & Dashboards you must enable it in Business Manager.
The PWA Kit is an open-source project hosted on GitHub.
The GitHub repository for PWA Kit is set up as a monorepo with several packages, including libraries, project templates, SDKs, and other tools.
To help you navigate the repository, here is an overview of each package that it contains:
| Package | Description |
|---|---|
| commerce-sdk-react | Library of React hooks for fetching data from Salesforce B2C Commerce. |
| internal-lib-build | Internal tools used by other packages in the pwa-kit repository. |
| pwa-kit-create-app | Tool for generating PWA Kit projects based on project templates. |
| pwa-kit-dev | Command-line tool to develop, build, and deploy PWA Kit projects. |
| pwa-kit-react-sdk | Library of components and utilities that supports the rendering pipeline. |
| pwa-kit-runtime | Library of runtime environments that enable Node.js applications to run on Managed Runtime. |
| template-express-minimal | Bare-bones project template for apps running on Managed Runtime. |
| template-retail-react-app | Project template that includes an isomorphic JavaScript storefront. |
| template-typescript-minimal | Zero-configuration project template for TypeScript applications built with PWA Kit SDKs. |
Security patches are provided for 24 months after the general availability of each major version of the PWA Kit SDKs (1.0, 2.0, and so on).