Add a feature toggle for app base names

Author: vcua-mobify

packages/pwa-kit-react-sdk/src/ssr/browser/main.jsx

@@ -18,6 +18,7 @@ import {uuidv4} from '../../utils/uuidv4.client'
 import PropTypes from 'prop-types'
 import logger from '../../utils/logger-instance'
 import {getEnvBasePath} from '@salesforce/pwa-kit-runtime/utils/ssr-namespace-paths'
+import {getBasename} from '../universal/utils'
 
 /* istanbul ignore next */
 export const registerServiceWorker = (url) => {
@@ -45,11 +46,11 @@ export const registerServiceWorker = (url) => {
 export const OuterApp = ({routes, error, WrappedApp, locals, onHydrate}) => {
     const AppConfig = getAppConfig()
     const isInitialPageRef = useRef(true)
-    const basepath = getEnvBasePath()
+    const routerBasename = getBasename() || undefined
 
     return (
         <ServerContext.Provider value={{}}>
-            <Router ref={onHydrate} basename={basepath}>
+            <Router ref={onHydrate} basename={routerBasename}>
                 <CorrelationIdProvider
                     correlationId={() => {
                         // If we are hydrating an error page use the server correlation id.

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

@@ -41,6 +41,7 @@ import PerformanceTimer from '../../utils/performance'
 import {PERFORMANCE_MARKS} from '../../utils/performance-marks'
 
 import {getEnvBasePath} from '@salesforce/pwa-kit-runtime/utils/ssr-namespace-paths'
+import {getBasename} from '../universal/utils'
 
 const CWD = process.cwd()
 const BUNDLES_PATH = path.resolve(CWD, 'build/loadable-stats.json')
@@ -272,10 +273,11 @@ export const render = (req, res, next) => {
 
 const OuterApp = ({req, res, error, App, appState, routes, routerContext, location}) => {
     const AppConfig = getAppConfig()
-    const basepath = getEnvBasePath()
+    const routerBasename = getBasename() || undefined
+
     return (
         <ServerContext.Provider value={{req, res}}>
-            <Router location={location} context={routerContext} basename={basepath}>
+            <Router location={location} context={routerContext} basename={routerBasename}>
                 <CorrelationIdProvider
                     correlationId={res.locals.requestId}
                     resetOnPageChange={false}

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

@@ -9,6 +9,7 @@
  */
 import {proxyConfigs} from '@salesforce/pwa-kit-runtime/utils/ssr-shared'
 import {getEnvBasePath, bundleBasePath} from '@salesforce/pwa-kit-runtime/utils/ssr-namespace-paths'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 
 const onClient = typeof window !== 'undefined'
 
@@ -53,3 +54,16 @@ export const getProxyConfigs = () => {
     // Clone to avoid accidental mutation of important configuration variables.
     return configs.map((config) => ({...config}))
 }
+
+/**
+ * Returns the basename (envBasePath) if showBasename is enabled in the app config.
+ * This is used for URLs that bypass React Router (e.g., window.location, href attributes).
+ * React Router handles basename via its basename prop when showBasename is enabled.
+ *
+ * @returns {string} - The basename if showBasename is true, otherwise an empty string
+ */
+export const getBasename = () => {
+    const config = getConfig()
+    const showBasename = config?.app?.url?.showBasename !== false
+    return showBasename ? getEnvBasePath() : ''
+}

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

@@ -18,7 +18,7 @@ import {
 } from '@salesforce/retail-react-app/app/components/shared/ui'
 
 import {BrandLogo, FileIcon} from '@salesforce/retail-react-app/app/components/icons'
-import {getEnvBasePath} from '@salesforce/pwa-kit-runtime/utils/ssr-namespace-paths'
+import {getBasename} from '@salesforce/pwa-kit-react-sdk/ssr/universal/utils'
 
 // <Error> is rendered when:
 //
@@ -55,9 +55,10 @@ const Error = (props) => {
                         // as the application is in an error state. We need to force a
                         // hard navigation to get back to the normal state.
                         // Include basename since this bypasses React Router
+                        // Respect showBasename config setting
                         onClick={() => {
-                            const envBasePath = getEnvBasePath()
-                            window.location.href = envBasePath ? `${envBasePath}/` : '/'
+                            const basename = getBasename()
+                            window.location.href = basename ? `${basename}/` : '/'
                         }}
                     />
                 </Box>

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

@@ -6,7 +6,7 @@
  */
 
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
-import {getEnvBasePath} from '@salesforce/pwa-kit-runtime/utils/ssr-namespace-paths'
+import {getBasename} from '@salesforce/pwa-kit-react-sdk/ssr/universal/utils'
 
 /**
  * This functions takes an url and returns a site object,
@@ -104,11 +104,12 @@ export const getSiteByReference = (siteRef) => {
 export const getParamsFromPath = (path) => {
     let {pathname, search} = getPathnameAndSearch(path)
 
-    // Remove the envBasePath from the pathname if present since
+    // Remove the basename from the pathname if present since
     // it shifts the location of the site and locale in the pathname
-    const envBasePath = getEnvBasePath()
-    if (pathname.startsWith(envBasePath)) {
-        pathname = pathname.substring(envBasePath.length)
+    // Respect showBasename config setting
+    const basename = getBasename()
+    if (basename && pathname.startsWith(basename)) {
+        pathname = pathname.substring(basename.length)
     }
 
     const config = getConfig()

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

@@ -14,6 +14,7 @@ import {
 } from '@salesforce/retail-react-app/app/utils/site-utils'
 import {HOME_HREF, urlPartPositions} from '@salesforce/retail-react-app/app/constants'
 import {getEnvBasePath} from '@salesforce/pwa-kit-runtime/utils/ssr-namespace-paths'
+import {getBasename} from '@salesforce/pwa-kit-react-sdk/ssr/universal/utils'
 
 /**
  * Constructs an absolute URL from a given path and an optional application origin.
@@ -128,7 +129,7 @@ export const searchUrlBuilder = (searchTerm) => '/search?q=' + encodeURIComponen
  * window.location to force a hard refresh of the page.
  * Because this bypasses React Router, we need to manually add the basename to the url, if one is
  * defined in the app config.
- * 
+ *
  * @param {String} shortCode - The locale short code.
  * @param {function(*, *, *, *=): string} - Generates a site URL from the provided path, site and locale.
  * @param {string[]} opts.disallowParams - URL parameters to remove
@@ -184,10 +185,12 @@ export const getPathWithLocale = (shortCode, buildUrl, opts = {}) => {
         site.alias || site.id,
         locale?.alias || locale?.id
     )
-    
+
     // Add basename for locale selection URLs since they bypass React Router
     // (React Router handles basename for navigation via basename prop)
-    return envBasePath ? `${envBasePath}${newUrl}` : newUrl
+    // Respect showBasename config setting
+    const basename = getBasename()
+    return basename ? `${basename}${newUrl}` : newUrl
 }
 
 /**