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:
- eCDN routing rules — a Cloudflare rule expression that routes matching paths to your Managed Runtime (MRT) environment. Everything else stays on SFRA/SiteGenesis.
app/routes.jsxfiltering — 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:
- PIG and ODS (eCDN): Paste the rule expression into Rule expression in the Business Manager eCDN UI, or pass it to the
createMrtRulesAPI. When you use the API, also scope the expression to your hostname withhttp.host. For the setup steps, see CDN Routing Rules for Hybrid Implementations. - Local development (hybrid proxy): eCDN isn’t available on
localhost. Use the PWA Kit hybrid proxy instead. See Set Up Hybrid Locally for Local Development.
- 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, overrideoverrides/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 (
/cartand/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).