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, checkout a demo of the Retail React App at pwa-kit.mobify-storefront.com or 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 |
|---|---|
| pwa-kit-create-app | Creates PWA Kit projects based on project templates. |
| pwa-kit-dev | Command-line tools to develop, build, and deploy PWA Kit projects. |
| pwa-kit-runtime | Enables Node.js applications to run on Managed Runtime. |
| pwa-kit-react-sdk | Utilities that support the rendering pipeline. |
| commerce-sdk-react | React hooks for interacting with the Salesforce B2C Commerce API |
| template-retail-react-app | Default template for starting projects. |
| template-typescript-minimal | Zero-configuration project template for TypeScript applications. |
| template-express-minimal | Bare-bones project template for apps running on Managed Runtime. |
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).
PWA Kit releases nightly builds on a nightly cadence for better visibility about upcoming features and a chance for implementers to test code integrations.
Nightly releases of PWA Kit packages are released to npm using the distribution tag nightly-next. The latest nightly-next tag can be viewed on npm.
These packages can be installed by running:
npm install <package-name>@nightly-next
As an example, to install the latest nightly build for @salesforce/commerce-sdk-react to your PWA Kit project, run:
npm install @salesforce/commerce-sdk-react@nightly-next
Do not use preview versions in production.
These builds are untested and unsupported. Some features included in the nightly builds may not be included in final PWA Kit releases. These unreleased builds may not even load, may have undocumented features, known defects, and any number of other issues. They are intended for use by developers and others wishing to get early access to planned PWA Kit features.