Set Up Hybrid Storefront with On-Demand Sandbox (ODS) Instances Using eCDN

Applies to: Storefront Next

Use Cloudflare eCDN origin routing on ODS instances to run Storefront Next and SFRA/SiteGenesis side by side at one origin. This setup is for deployed ODS environments and uses eCDN origin routing instead of the local hybrid proxy. At the end of this setup, navigate between Storefront Next and SFRA/SiteGenesis pages in ODS with no visible redirects, using routing behavior that mirrors production.

Run Storefront Next and SFRA/SiteGenesis together on deployed ODS instances under one origin, with no visible redirects or session loss. Teams can validate hybrid behavior in an environment that is much closer to production than localhost.

Routing decisions on ODS use the same Cloudflare eCDN expression format (http.request.uri.path matches) used in production. Reuse your production routing patterns so ODS testing reflects real deployment behavior.

ODS lets customers spin up multiple development instances in parallel and test different migration or routing configurations safely. This strategy complements local hybrid proxy workflows on localhost, giving teams both fast local iteration and production-like validation on ODS.

No assumptions are made about which pages live on Storefront Next versus SFRA/SiteGenesis. You define the split entirely through your eCDN origin rules, so any mix of migrated and legacy routes is supported.

Make sure that:

• You have an active ODS instance with SFRA/SiteGenesis deployed.
• You have Managed Runtime Admin console access for the target environment.
• You complete storefront setup in Business Manager as described in Choose Your Storefront Next Quick Start Path.

Complete the Shared Hybrid Auth Setup for the site on your ODS instance. The shared steps are the same across all environments:

1. Create or confirm a SLAS client that includes the sfcc.session_bridge scope. For an ODS instance, you can find your SLAS Client ID and Client Secret in SLAS Admin or in your .env.default file. See Shared Hybrid Auth Setup, Steps 1–2.
2. In Merchant Tools > Select Site > Site Preferences > Hybrid Auth Settings, enable the Hybrid Auth toggle, enter your SLAS Client ID (and secret, or select Is Public Client for a public client), optionally enable Shopper Context and Do-Not-Track Synchronization, and click Apply. See Shared Hybrid Auth Setup, Step 4.

In the Managed Runtime Admin console, open your project, select the target environment, and go to the Environment Variables section. Set the following values for each deployed environment where you use hybrid routing.

1. Enable hybrid mode.

2. Set PUBLIC__app__hybrid__legacyRoutes to a JSON array of routes that belong to SFRA/SiteGenesis. When a user clicks a <Link> to one of these paths, the client-side navigation middleware forces a full-page load so eCDN routes the request to SFRA/SiteGenesis.

   Or use exact paths and React Router-style parameterized patterns:

   This list is the inverse of your eCDN origin routing rules. If a route isn’t in your routing rules (SFRA/SiteGenesis owns it) and a Storefront Next page links to it, add it here. If it’s missing, React Router tries to render the route client-side and shows a 404.

   For example, if your eCDN rule routes /product/* to Storefront Next, do not include /product/* in legacyRoutes. If /cart and /checkout aren’t in your eCDN rule, include them in legacyRoutes so Storefront Next forces a full-page navigation to SFRA/SiteGenesis.

Use the hosted zone created during setup to configure eCDN origin routing rules. To compare route split patterns, see Choose a Hybrid Routing Matrix.

1. In Business Manager, navigate to Administration > Sites > Storefronts.
2. Select the storefront that you just created.
3. Under Environments, select the environment that you are setting up.
4. In the eCDN section, find the default routing rule.
5. Expand that routing rule to locate your eCDN zone hostname.

1. In Business Manager, navigate to Merchant Tools > Select Site > SEO & Discoverability > Aliases.

2. Update http-host and https-host with the eCDN hostname that you noted in the previous section.

3. Click Save.

Configure the eCDN routing rule for your hostname in the Business Manager eCDN UI, then set the Storefront Next rule expression. For the full UI walkthrough and screenshots, see Configure Routing Rules in the Business Manager UI.

1. Go to Administration > Sites > Embedded CDN Settings, open Configure Routing Rules for the zone that contains your hostname, and click Edit on the routing rule for your hostname.

2. Confirm that the Hostnames and MRT Origin fields are prefilled and match your setup.

3. In Rule expression, paste the following rule. This expression matches Storefront Next routes (home, category, product, search, and account flows), plus resource routes, action endpoints, React Router data prefetch requests, and static assets.

   

   This guide uses a default hybrid split: top-of-funnel pages (home, category, product, search, and authentication flows) on Storefront Next, with cart and checkout on SFRA. Modify both eCDN origin rules and PUBLIC__app__hybrid__legacyRoutes to support any hybrid storefront combination. Make sure the two route definitions are complementary.

4. Click Save.

Storefront Next enables storefront context and automatically adds site ID and locale prefixes to routes.

To correctly route between pages that include locale prefixes, configure URL rules in Business Manager so that SFRA/SiteGenesis URLs use matching prefixes.

1. In Business Manager, navigate to Merchant Tools > Select Site > SEO & Discoverability > URL Rules.
2. Select the Settings tab.
3. In the Locale Mapping section, set Locale Mapping to Path.
4. Add your Storefront Next prefixes for each supported locale.

5. Click Apply.

Your setup is working when navigation between Storefront Next and SFRA/SiteGenesis occurs without visible redirects, all required cookies persist across transitions, and the sfdc_dwsid request header matches the dwsid cookie value.

1. Visit your eCDN hostname.
2. Confirm the home page loads on Storefront Next.
3. Navigate to a page served by SFRA/SiteGenesis.
4. Open browser Developer Tools and inspect cookies. Confirm that the following cookies are set:
   • cc-nx-g_{Site_ID}: Guest refresh token
   • dwsid: B2C Commerce session ID
   • usid: SLAS customer ID
   • cc-at_{Site_ID}: SLAS access token (this cookie appears when the user lands on an SFRA/SiteGenesis page; after handoff to Storefront Next, it is consumed)
5. Navigate to any Storefront Next page and verify:
   • cc-nx-g_{SiteID} remains the same.
   • dwsid remains the same.
   • usid_{SiteID} remains the same.
   • cc-at_{SiteID} is no longer present because Storefront Next consumes it and stores the access token in localStorage as accesstoken{SiteID}.
6. In Developer Tools, switch to the Network tab.
7. Add an item to cart on Storefront Next.
8. Inspect the SCAPI Add to Cart request. In Request Headers, confirm sfdc_dwsid matches the dwsid cookie value.

• Compare alternate route splits in Hybrid Storefront Routing Matrix.
• Iterate on routing locally before redeploying to ODS by following Set Up Hybrid Proxy for Local Development.