PWA Kit Architecture

This guide briefly introduces the three main parts of the PWA Kit architecture: the Retail React App, the rendering and routing system, and the Managed Runtime infrastructure. This overview prepares you to dive into more detailed architecture guides on these topics and provides you with helpful context for the rest of the product documentation.

The Retail React App

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.

Rendering and Routing

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 guide → Rendering and Routing.

The Managed Runtime

The Managed Runtime provides the infrastructure to deploy, host, and monitor your PWA Kit storefront. This allows you to focus on developing your storefront instead of setting up and managing servers.

All PWA Kit applications are rendered in an environment that we call the App Server. The same App Server that runs on your local machine during development also runs on the Managed Runtime infrastructure. This makes it easy to deploy your code often—without any surprises. On the Managed Runtime, the App Server runs in a streamlined environment that offers low computing costs, high availability, fast rendering, and massive scaling capacity.

To learn more, read the full architecture guide → Managed Runtime Infrastructure.