@W-20784635@ Support adding base paths to shopper facing URLs by vcua-mobify · Pull Request #3615 · SalesforceCommerceCloud/pwa-kit

vcua-mobify · 2026-01-28T01:20:21Z

Previously, the base path feature only applied to routes defined in the Express app (ie. routes defined in ssr.js, proxies, bundle assets).

This PR expands the base path feature by allowing projects to also add the base path to routes defined in React Router (ie. routes defined in routes.jsx, such as /category or /product).

This PR adds a feature toggle so that projects can decide whether the base path only applies to Express routes or both Express and React Router routes.

Note: the same base path used by Express routes will be applied to React Router routes. This implementation intentionally does not provide a mechanism for setting the React Router routes to have a different base path from Express routes.
You cannot have www.example.com/shop/category/.. (React Router route) if you have www.example.com/store/mobify/proxy/.. (Express route)

Testing the feature:
Base paths on both Express and React Router routes

Set a base path in the config file (config.ssrParameters.envBasePath) (You can set this to /test because our default SLAS client is already configured to accept redirect_uris with /test)
Set config.app.showBasePath to true (this is the feature toggle that tells the app to include base paths to React Router routes)
Start the app
Verify that pages load and that links are working (ensure we are getting the correct site id and locale into SCAPI calls, etc.)
Verify that page urls and links include the base path (check the product tile, navigation, etc.)
Verify that locale changing works

Base paths on only Express routes. No base path on React Router routes

Disable the feature toggle and restart your app
Verify that the base path is still added to express routes (ie. /mobify/proxy or /callback)
Verify that page urls and links do not include the base path (check the product tile, navigation, etc.)
Verify that locale changing works

Generator

Generate the app
Verify the generated app's config has the showBasePath field
Verify the app starts up

cc-prodsec · 2026-01-28T01:20:30Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

vcua-mobify

Added comments to explain and highlight some of the key changes in this PR

vcua-mobify · 2026-01-28T21:39:08Z

packages/pwa-kit-react-sdk/src/ssr/server/react-rendering.js

    return (
        <ServerContext.Provider value={{req, res}}>
-            <Router location={location} context={routerContext}>
+            <Router location={location} context={routerContext} basename={routerBasename}>


Adding the basename prop here and in main.jsx automatically adds the base path to almost all URLs.
This includes links that use the Link component and places where we use history to navigate.

This basename prop does not apply to places where we update window.location directly, hence other changes in this PR.

vcua-mobify · 2026-01-28T21:40:33Z

packages/template-retail-react-app/app/utils/url.js

+    // Add base path for locale selection URLs since we update window.location directly
+    // bypassing React Router
+    const basePath = getRouterBasePath()
+    return basePath ? `${basePath}${newUrl}` : newUrl


As noted in the comments, this function is used to generate links that update windows.location directly. Since this bypasses react router, we need to manually apply the base path.

vcua-mobify · 2026-01-28T21:42:42Z

packages/template-retail-react-app/app/utils/site-utils.js

+    const basePath = getRouterBasePath()
+    if (basePath && pathname.startsWith(basePath)) {
+        pathname = pathname.substring(basePath.length)
+    }


This code handles removing the base path from the path before we start doing pattern matching for multi-site.

I think this is a simple way to ensure adding a router base path does not break our existing multi-site implementation but I'm open to suggestions for other approaches.

vcua-mobify · 2026-01-28T21:43:37Z

packages/template-retail-react-app/config/default.js

            site: 'path',
            locale: 'path',
            showDefaults: true,
+            showBasePath: false,


New config property that, if not defined, will default to false so this should not break existing project configs.

vcua-mobify · 2026-01-28T21:52:31Z

packages/pwa-kit-react-sdk/src/ssr/universal/utils.js

+export const getRouterBasePath = () => {
+    const config = getConfig()
+    const showBasePath = config?.app?.url?.showBasePath === true
+    return showBasePath ? getEnvBasePath() : ''


This utility function exists to support the feature toggle since calling getEnvBasePath directly bypasses the toggle.

I opted to separate this from getEnvBasePath to support cases where a project wants the base path only on express routes. For example, suppose a project wants to have www.example.com/emea/mobify/proxy/... (envBasePath: /emea) along with shopper facing urls like www.example.com/gb/category/.. or www.example.com/fr/product/.. where gb and fr are site aliases in our existing multi-site implementation and /emea is a base path for a target MRT environment. Without this separation, shopper facing urls would be www.example.com/emea/gb/category/...

Note that to support the above scenario, projects would need a CDN to route requests with /emea, /gb, /fr to the same MRT environment.

alexvuong · 2026-01-29T21:26:15Z

packages/template-retail-react-app/app/utils/site-utils.test.js

+            /* eslint-disable @typescript-eslint/no-var-requires */
+            const {
+                getParamsFromPath: getParamsFromPathFresh
+            } = require('@salesforce/retail-react-app/app/utils/site-utils')


Do we need to re-import this file? How come other tests does not have to do this?

alexvuong · 2026-01-29T21:27:43Z

packages/template-retail-react-app/app/utils/site-utils.test.js

+            const basePath = '/test-base'
+            // Re-require modules to get fresh imports with mocks
+            // This is because these modules are first imported at module load time before mocks were set
+            // and have references to the original functions.


I don't think this is true because we are mocking getConfig as usual within other tests, what makes this one different?

Same comment with the rest of require statement

alexvuong · 2026-01-29T21:34:22Z

packages/template-retail-react-app/app/utils/url.js

+
+    // Add base path for locale selection URLs since we update window.location directly
+    // bypassing React Router
+    const basePath = getRouterBasePath()


we call this func twice, can we call it at the top and use for bother removal and re-add here

packages/template-retail-react-app/app/utils/url.js

alexvuong · 2026-01-30T20:38:22Z

packages/template-retail-react-app/app/components/_app/index.jsx

-                                        location: {
-                                            ...location,
-                                            search: ''
+                                    href={`${appOrigin}${getRouterBasePath()}${getPathWithLocale(


Nit: please break this down to a variable

vcua-mobify added 5 commits January 26, 2026 17:00

Add base path to react router routes

523c429

Handle basename for urls that bypass react router

5ac1003

Add a feature toggle for app base names

acb49ce

Add tests

c0b691d

Update config templates

e760832

vcua-mobify added 4 commits January 28, 2026 12:12

Rename getBasename to getRouterBasePath

f8c2a30

Update changelogs

9a63eb8

Test fixes

244010e

Remove unused import and cleanup comments

941873e

vcua-mobify commented Jan 28, 2026

View reviewed changes

vcua-mobify marked this pull request as ready for review January 28, 2026 22:04

vcua-mobify requested a review from a team as a code owner January 28, 2026 22:04

alexvuong reviewed Jan 29, 2026

View reviewed changes

packages/template-retail-react-app/app/utils/url.js Show resolved Hide resolved

Apply suggestions

8503a08

vcua-mobify requested a review from alexvuong January 30, 2026 20:03

alexvuong reviewed Jan 30, 2026

View reviewed changes

alexvuong approved these changes Jan 30, 2026

View reviewed changes

Clean up redundant code

470aabb

vcua-mobify merged commit 23bfeba into feature/productize-path-prefixes Jan 30, 2026
42 checks passed

vcua-mobify deleted the vc/app-base-path branch January 30, 2026 21:55

vcua-mobify mentioned this pull request Mar 6, 2026

@W-20784635@ Productize base paths #3614

Draft

Conversation

vcua-mobify commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cc-prodsec commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

vcua-mobify left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vcua-mobify commented Jan 28, 2026 •

edited

Loading

cc-prodsec commented Jan 28, 2026 •

edited

Loading