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.