@W-16442332@ Add support for environment level base path (the base path for /mobify routes)

packages/pwa-kit-create-app/assets/bootstrap/js/overrides/app/components/_app-config/index.jsx.hbs

@@ -46,6 +46,12 @@ const AppConfig = ({children, locals = {}}) => {
 
     const appOrigin = getAppOrigin()
 
+    const proxy = !onClient
+        ? `${appOrigin}${commerceApiConfig.proxyPath}`
+        : `${appOrigin}${getNamespace()}${commerceApiConfig.proxyPath}`
+
+    const redirectURI = `${appOrigin}/callback`
+
     return (
         <CommerceApiProvider
             shortCode={commerceApiConfig.parameters.shortCode}
@@ -54,10 +60,10 @@ const AppConfig = ({children, locals = {}}) => {
             siteId={locals.site?.id}
             locale={locals.locale?.id}
             currency={locals.locale?.preferredCurrency}
-            redirectURI={`${appOrigin}/callback`}
-            proxy={`${appOrigin}${commerceApiConfig.proxyPath}`}
+            redirectURI={redirectURI}
+            proxy={proxy}
             headers={headers}
-            OCAPISessionsURL={`${appOrigin}${proxyBasePath}/ocapi/s/${locals.site?.id}/dw/shop/v22_8/sessions`}
+            OCAPISessionsURL={`${appOrigin}${proxyBasePath()}/ocapi/s/${locals.site?.id}/dw/shop/v22_8/sessions`}
             logger={createLogger({packageName: 'commerce-sdk-react'})}
             {{#if answers.project.commerce.isSlasPrivate}}
             // Set 'enablePWAKitPrivateClient' to true use SLAS private client login flows.

packages/pwa-kit-create-app/assets/templates/@salesforce/retail-react-app/app/components/_app-config/index.jsx.hbs

@@ -46,6 +46,12 @@ const AppConfig = ({children, locals = {}}) => {
 
     const appOrigin = getAppOrigin()
 
+    const proxy = !onClient
+        ? `${appOrigin}${commerceApiConfig.proxyPath}`
+        : `${appOrigin}${getNamespace()}${commerceApiConfig.proxyPath}`
+
+    const redirectURI = `${appOrigin}/callback`
+
     return (
         <CommerceApiProvider
             shortCode={commerceApiConfig.parameters.shortCode}
@@ -54,10 +60,10 @@ const AppConfig = ({children, locals = {}}) => {
             siteId={locals.site?.id}
             locale={locals.locale?.id}
             currency={locals.locale?.preferredCurrency}
-            redirectURI={`${appOrigin}/callback`}
-            proxy={`${appOrigin}${commerceApiConfig.proxyPath}`}
+            redirectURI={redirectURI}
+            proxy={proxy}
             headers={headers}
-            OCAPISessionsURL={`${appOrigin}${proxyBasePath}/ocapi/s/${locals.site?.id}/dw/shop/v22_8/sessions`}
+            OCAPISessionsURL={`${appOrigin}${proxyBasePath()}/ocapi/s/${locals.site?.id}/dw/shop/v22_8/sessions`}
             logger={createLogger({packageName: 'commerce-sdk-react'})}
             {{#if answers.project.commerce.isSlasPrivate}}
             // Set 'enablePWAKitPrivateClient' to true use SLAS private client login flows.

packages/pwa-kit-dev/src/ssr/server/build-dev-server.js

@@ -167,7 +167,7 @@ export const DevServerMixin = {
             app.__hotServerMiddleware = webpackHotServerMiddleware(app.__compiler)
         }
 
-        app.use(`${bundleBasePath}/development`, app.__devMiddleware)
+        app.use(`${bundleBasePath()}/development`, app.__devMiddleware)
 
         app.__hmrMiddleware = (_, res) => res.status(501).send('Hot Module Reloading is disabled.')
         const clientCompiler = app.__compiler.compilers.find((compiler) => compiler.name === CLIENT)
@@ -210,7 +210,7 @@ export const DevServerMixin = {
         // Proxy bundle asset requests to the local
         // build directory.
         app.use(
-            `${bundleBasePath}/development`,
+            `${bundleBasePath()}/development`,
             express.static(path.resolve(process.cwd(), 'src'), {
                 dotFiles: 'deny',
                 setHeaders: setLocalAssetHeaders,

packages/pwa-kit-dev/src/ssr/server/public-path.js

@@ -9,12 +9,24 @@
  * This file is used to dynamically set the webpack public path used by HMR via the global webpack variable
  * __webpack_public_path__
  * See https://webpack.js.org/guides/public-path/
- *
- * Previously, we hard coded the public path in our webpack config to '/mobify/bundle/development/'
- * but we need something more dynamic to support namespaced /mobify paths.
  */
 
-import {bundleBasePath} from '@salesforce/pwa-kit-runtime/utils/ssr-namespace-paths'
-
 /* global __webpack_public_path__: writable */
-__webpack_public_path__ = `${bundleBasePath}/development/`
+
+/**
+ * TODO - __webpack_public_path__ must be the first thing set on client side local environments
+ * for HMR to work!
+ * However, when this value needs to be set, window.__config__ is not yet hydrated so we
+ * do not have access to the base path
+ *
+ * Resolve this to allow the local development server to use namespaces.
+ *
+ * import {bundleBasePath} from '@salesforce/pwa-kit-runtime/utils/ssr-namespace-paths'
+ * const getPublicPath = () => `${bundleBasePath()}/development/`
+ * console.log(getPublicPath())
+ *
+ * __webpack_public_path__ = getPublicPath()
+ */
+
+// Setting this so that *.hot-update.json requests are resolving
+__webpack_public_path__ = '/mobify/bundle/development'

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

@@ -23,7 +23,7 @@ export const getAssetUrl = (path) => {
     /* istanbul ignore next */
     const publicPath = onClient
         ? `${window.Progressive.buildOrigin}`
-        : `${bundleBasePath}/${process.env.BUNDLE_ID || 'development'}/`
+        : `${bundleBasePath()}/${process.env.BUNDLE_ID || 'development'}/`
     return path ? `${publicPath}${path}` : publicPath
 }
 

packages/pwa-kit-runtime/src/ssr/server/build-remote-server.js

@@ -214,7 +214,7 @@ export const RemoteServerFactory = {
      * @private
      */
     _isBundleOrProxyPath(url) {
-        return url.startsWith(proxyBasePath) || url.startsWith(bundleBasePath)
+        return url.startsWith((proxyBasePath())) || url.startsWith(bundleBasePath())
     },
 
     /**
@@ -638,7 +638,7 @@ export const RemoteServerFactory = {
      */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     _setupProxying(app, options) {
-        app.all(`${proxyBasePath}/*`, (_, res) => {
+        app.all(`${proxyBasePath()}/*`, (_, res) => {
             return res.status(501).json({
                 message:
                     'Environment proxies are not set: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/proxying-requests.html'

packages/pwa-kit-runtime/src/utils/ssr-namespace-paths.js

@@ -5,39 +5,32 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
+import { getConfig } from './ssr-config'
+
 /**
  * This file defines the /mobify paths used to set up our Express endpoints.
  *
  * If a namespace for the /mobify paths is defined, the methods in here will return the
  * namespaced path. ie. /namespace/mobify/...
  */
 
+// The MOBIFY_PATH is defined separately in preparation for the future eventual removal or
+// replacement of the 'mobify' part of these paths
 const MOBIFY_PATH = '/mobify'
 const PROXY_PATH_BASE = `${MOBIFY_PATH}/proxy`
 const BUNDLE_PATH_BASE = `${MOBIFY_PATH}/bundle`
 const CACHING_PATH_BASE = `${MOBIFY_PATH}/caching`
 const HEALTHCHECK_PATH = `${MOBIFY_PATH}/ping`
 const SLAS_PRIVATE_CLIENT_PROXY_PATH = `${MOBIFY_PATH}/slas/private`
 
-/**
- * @private
- */
-const _getNamespace = () => {
-    // TODO - namespaces for /mobify path will be implemented at a later date.
-    // Returns an empty string for now.
-    // Below is an example of what this implementation might look like.
-    /*
-        let {namespace = ""} = getConfig()
-        namespace = typeof namespace === 'function' ? namespace() : namespace
-        return namespace
-    */
-    return ''
+// TODO - Allow projects to define this function?
+export const getNamespace = () => {
+    const config = getConfig()
+    return config?.envBasePath ? config.envBasePath : ''
 }
 
-export const ssrNamespace = _getNamespace()
-
-export const proxyBasePath = `${ssrNamespace}${PROXY_PATH_BASE}`
-export const bundleBasePath = `${ssrNamespace}${BUNDLE_PATH_BASE}`
-export const cachingBasePath = `${ssrNamespace}${CACHING_PATH_BASE}`
-export const healthCheckPath = `${ssrNamespace}${HEALTHCHECK_PATH}`
-export const slasPrivateProxyPath = `${ssrNamespace}${SLAS_PRIVATE_CLIENT_PROXY_PATH}`
+export const proxyBasePath = () => `${getNamespace()}${PROXY_PATH_BASE}`
+export const bundleBasePath = () => `${getNamespace()}${BUNDLE_PATH_BASE}`
+export const cachingBasePath = () => `${getNamespace()}${CACHING_PATH_BASE}`
+export const healthCheckPath = () => `${getNamespace()}${HEALTHCHECK_PATH}`
+export const slasPrivateProxyPath = () => `${getNamespace()}${SLAS_PRIVATE_CLIENT_PROXY_PATH}`

packages/pwa-kit-runtime/src/utils/ssr-server.test.js

@@ -118,11 +118,11 @@ describe('utils/ssr-server tests', () => {
 
         updatePackageMobify(baseMobify)
 
-        expect(getFullRequestURL(`${proxyBasePath}/base/somepath`)).toBe(
+        expect(getFullRequestURL(`${proxyBasePath()}/base/somepath`)).toBe(
             'https://www.merlinspotions.com/somepath'
         )
 
-        expect(getFullRequestURL(`${proxyBasePath}/base2/somepath`)).toBe(
+        expect(getFullRequestURL(`${proxyBasePath()}/base2/somepath`)).toBe(
             'https://api.merlinspotions.com/somepath'
         )
     })

packages/pwa-kit-runtime/src/utils/ssr-server/utils.js

@@ -22,7 +22,7 @@ export const isRemote = () =>
     Object.prototype.hasOwnProperty.call(process.env, 'AWS_LAMBDA_FUNCTION_NAME')
 
 export const getBundleBaseUrl = () => {
-    return `${bundleBasePath}/${isRemote() ? process.env.BUNDLE_ID : 'development'}/`
+    return `${bundleBasePath()}/${isRemote() ? process.env.BUNDLE_ID : 'development'}/`
 }
 
 let QUIET = false
@@ -88,13 +88,13 @@ export const getHashForString = (text) => {
 export const getFullRequestURL = (url) => {
     // If it starts with a protocol (e.g. http(s)://, file://), then it's already a full URL
     if (/^[a-zA-Z]+:\/\//.test(url)) return url
-    const proxy = proxyConfigs.find(({path}) => url.startsWith(`${proxyBasePath}/${path}/`))
+    const proxy = proxyConfigs.find(({path}) => url.startsWith(`${(proxyBasePath())}/${path}/`))
     if (proxy) {
-        return url.replace(`${proxyBasePath}/${proxy.path}`, `${proxy.protocol}://${proxy.host}`)
+        return url.replace(`${proxyBasePath()}/${proxy.path}`, `${proxy.protocol}://${proxy.host}`)
     }
 
     throw new Error(
-        `Unable to fetch ${url}, relative paths must begin with ${proxyBasePath} followed by a configured proxy path.`
+        `Unable to fetch ${url}, relative paths must begin with ${proxyBasePath()} followed by a configured proxy path.`
     )
 }
 

packages/pwa-kit-runtime/src/utils/ssr-shared.js

@@ -169,8 +169,8 @@ export const updatePackageMobify = (newValue) => {
         }
 
         // Generate paths
-        config.proxyPath = `${proxyBasePath}/${config.path}`
-        config.cachingPath = `${cachingBasePath}/${config.path}`
+        config.proxyPath = `${proxyBasePath()}/${config.path}`
+        config.cachingPath = `${cachingBasePath()}/${config.path}`
 
         proxyConfigs.push(config)
     }

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

@@ -27,7 +27,7 @@ import {
     resolveLocaleFromUrl
 } from '@salesforce/retail-react-app/app/utils/site-utils'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
-import {proxyBasePath} from '@salesforce/pwa-kit-runtime/utils/ssr-namespace-paths'
+import {getNamespace, proxyBasePath} from '@salesforce/pwa-kit-runtime/utils/ssr-namespace-paths'
 import {createUrlTemplate} from '@salesforce/retail-react-app/app/utils/url'
 import createLogger from '@salesforce/pwa-kit-runtime/utils/logger-factory'
 
@@ -50,11 +50,23 @@ const AppConfig = ({children, locals = {}}) => {
     const headers = {
         'correlation-id': correlationId
     }
+    const onClient = typeof window !== 'undefined'
 
     const commerceApiConfig = locals.appConfig.commerceAPI
 
     const appOrigin = getAppOrigin()
 
+    const isLocalhost = appOrigin.includes('localhost')
+
+    // On localhost, we always want to include the namespace
+    // On MRT, we only want to include the namespace on client side proxy requests
+    // as the namespace is omitted from MRT server side endpoints
+    const proxy = !isLocalhost && !onClient
+        ? `${appOrigin}${commerceApiConfig.proxyPath}`
+        : `${appOrigin}${getNamespace()}${commerceApiConfig.proxyPath}`
+
+    const redirectURI = `${appOrigin}/callback`
+
     return (
         <CommerceApiProvider
             shortCode={commerceApiConfig.parameters.shortCode}
@@ -63,13 +75,13 @@ const AppConfig = ({children, locals = {}}) => {
             siteId={locals.site?.id}
             locale={locals.locale?.id}
             currency={locals.locale?.preferredCurrency}
-            redirectURI={`${appOrigin}/callback`}
-            proxy={`${appOrigin}${commerceApiConfig.proxyPath}`}
+            redirectURI={redirectURI}
+            proxy={proxy}
             headers={headers}
             // Uncomment 'enablePWAKitPrivateClient' to use SLAS private client login flows.
             // Make sure to also enable useSLASPrivateClient in ssr.js when enabling this setting.
             // enablePWAKitPrivateClient={true}
-            OCAPISessionsURL={`${appOrigin}${proxyBasePath}/ocapi/s/${locals.site?.id}/dw/shop/v22_8/sessions`}
+            OCAPISessionsURL={`${appOrigin}${proxyBasePath()}/ocapi/s/${locals.site?.id}/dw/shop/v22_8/sessions`}
             logger={createLogger({packageName: 'commerce-sdk-react'})}
         >
             <MultiSiteProvider site={locals.site} locale={locals.locale} buildUrl={locals.buildUrl}>

packages/template-retail-react-app/app/hooks/use-active-data.js

@@ -79,7 +79,7 @@ const useActiveData = () => {
             if (!canTrack()) return
             try {
                 var activeDataUrl =
-                    `${proxyBasePath}/ocapi/on/demandware.store/Sites-` +
+                    `${proxyBasePath()}/ocapi/on/demandware.store/Sites-` +
                     siteId +
                     '-Site/' +
                     localeId +

packages/test-commerce-sdk-react/app/components/_app-config/index.tsx

@@ -32,7 +32,7 @@ const AppConfig = (props: AppConfigProps): ReactElement => {
             clientId="4afbc51f-6423-41c8-8b29-d7f2825b5bee"
             organizationId="f_ecom_zzrf_006"
             redirectURI="http://localhost:3000/callback"
-            proxy={`http://localhost:3000/${String(proxyBasePath)}/api`}
+            proxy={`http://localhost:3000/${String(proxyBasePath())}/api`}
             locale={locale}
             currency="USD"
             headers={headers}