Hybrid Storefront Routing Matrix (PWA Kit)

Use this routing matrix to choose a hybrid storefront split between PWA Kit (Composable Storefront) and SFRA/SiteGenesis.

PWA Kit hybrid routing has two complementary parts:

  1. eCDN routing rules — a Cloudflare rule expression that routes matching paths to your Managed Runtime (MRT) environment. Everything else stays on SFRA/SiteGenesis.
  2. app/routes.jsx filtering — remove the SFRA/SiteGenesis-owned routes from your PWA Kit route table so that React Router forces a full-page navigation (instead of a soft, client-side navigation) to those paths.

Keep the two definitions complementary: any path routed to MRT by eCDN should remain in app/routes.jsx, and any path owned by SFRA/SiteGenesis should be removed from app/routes.jsx.

This matrix is for PWA Kit. For Storefront Next, see Hybrid Storefront Routing Matrix.

Use the same Cloudflare expression pattern in every environment, but apply it differently:

  • eCDN MRT rule expression: A single Cloudflare expression evaluated at the edge. Requests whose path matches the expression are routed to Managed Runtime (PWA Kit); all other requests go to SFRA/SiteGenesis.
  • app/routes.jsx: The PWA Kit client-side route table. Remove SFRA/SiteGenesis-owned routes so PWA Kit hard-navigates to them. For projects that use template extensibility, override overrides/app/routes.jsx.

The route patterns below use the default Retail React App routes (/, /category/:categoryId, /product/:productId, /search, /account, /login, /registration, /reset-password, /cart, /checkout). Adjust them to match your project’s routes.

Each configuration lists the eCDN rule expression (paths routed to PWA Kit on MRT) and the routes to remove from app/routes.jsx (paths owned by SFRA/SiteGenesis).

  • Strategy: The discovery funnel, search, account, and authentication routes run on PWA Kit. Only checkout (/cart and /checkout) stays on SFRA/SiteGenesis.
  • eCDN rule expression:
  • Remove from app/routes.jsx: /cart, /checkout
  • Strategy: Test or roll out a PWA Kit checkout while keeping browse and discovery routes on SFRA/SiteGenesis.
  • eCDN rule expression:
  • Remove from app/routes.jsx: /, /category/:categoryId, /product/:productId, /search, /account, /login, /registration, /reset-password
  • Strategy: An early pilot where only the home page is modernized and deeper flows remain on SFRA/SiteGenesis.
  • eCDN rule expression:
  • Remove from app/routes.jsx: /category/:categoryId, /product/:productId, /search, /account, /login, /registration, /reset-password, /cart, /checkout
  • Strategy: The home page stays on SFRA/SiteGenesis, while deeper browse and transactional routes move to PWA Kit.
  • eCDN rule expression:
  • Remove from app/routes.jsx: /
  • Strategy: Move high-volume catalog routes (category, product, search) to PWA Kit while preserving legacy account and checkout routes.
  • eCDN rule expression:
  • Remove from app/routes.jsx: /, /account, /login, /registration, /reset-password, /cart, /checkout
  • Strategy: Move account and authentication experiences to PWA Kit while leaving catalog and checkout on SFRA/SiteGenesis.
  • eCDN rule expression:
  • Remove from app/routes.jsx: /, /category/:categoryId, /product/:productId, /search, /cart, /checkout

Keep these route clauses routed to Managed Runtime in every matrix configuration. PWA Kit’s server-side rendering system relies on them:

  • ^/mobify.* for PWA Kit internal proxies and static assets.
  • ^/callback.* for the SLAS authentication callback.
  • ^/worker\.js.* for the PWA Kit service worker.

For the catch-all route, update the PWA /* route in app/routes.jsx to redirect to the default origin instead of rendering <PageNotFound />. For the full procedure, see Configure a Hybrid Storefront with Hybrid Auth (PWA Kit).