Merge branch 'develop' into v3/template-retail-react-app

Author: vmarta

packages/commerce-sdk-react/src/auth/index.ts

@@ -17,6 +17,8 @@ import {BaseStorage, LocalStorage, CookieStorage, MemoryStorage, StorageType} fr
 import {CustomerType} from '../hooks/useCustomerType'
 import {getParentOrigin, isOriginTrusted, onClient} from '../utils'
 import {
+    MOBIFY_PATH,
+    SLAS_PRIVATE_PROXY_PATH,
     SLAS_SECRET_WARNING_MSG,
     SLAS_SECRET_PLACEHOLDER,
     SLAS_SECRET_OVERRIDE_MSG
@@ -178,9 +180,9 @@ class Auth {
     private logger: Logger
 
     constructor(config: AuthConfig) {
-        // Special endpoint for injecting SLAS private client secret
-        const baseUrl = config.proxy.split(`/mobify/proxy/api`)[0]
-        const privateClientEndpoint = `${baseUrl}/mobify/slas/private`
+        // Special endpoint for injecting SLAS private client secret.
+        const baseUrl = config.proxy.split(MOBIFY_PATH)[0]
+        const privateClientEndpoint = `${baseUrl}${SLAS_PRIVATE_PROXY_PATH}`
 
         this.client = new ShopperLogin({
             proxy: config.enablePWAKitPrivateClient ? privateClientEndpoint : config.proxy,

packages/commerce-sdk-react/src/components/StorefrontPreview/utils.ts

@@ -7,6 +7,7 @@
 
 import {ApiClients} from '../../hooks/types'
 import {DEVELOPMENT_ORIGIN, getParentOrigin, isOriginTrusted} from '../../utils'
+import {LOCAL_BUNDLE_PATH} from '../../constant'
 
 /** Detects whether the storefront is running in an iframe as part of Storefront Preview.
  * @private
@@ -16,13 +17,15 @@ export const detectStorefrontPreview = () => {
     return isOriginTrusted(parentOrigin)
 }
 
-/** Returns the URL to load the Storefront Preview client script from the parent origin.
+/**
+ * Returns the URL to load the Storefront Preview client script from the parent origin.
+ * The client script is served from Runtime Admin and is not a part of the PWA Retail React App bundle.
  * @private
  */
 export const getClientScript = () => {
     const parentOrigin = getParentOrigin() ?? 'https://runtime.commercecloud.com'
     return parentOrigin === DEVELOPMENT_ORIGIN
-        ? `${parentOrigin}/mobify/bundle/development/static/storefront-preview.js`
+        ? `${parentOrigin}${LOCAL_BUNDLE_PATH}/static/storefront-preview.js`
         : `${parentOrigin}/cc/b2c/preview/preview.client.js`
 }
 

packages/commerce-sdk-react/src/constant.ts

@@ -14,6 +14,12 @@ export const IFRAME_HOST_ALLOW_LIST = Object.freeze([
     'https://runtime-admin-preview.mobify-storefront.com'
 ])
 
+// We hardcode these here since we don't want commerce-sdk-react to have a dependency on pwa-kit-runtime
+export const MOBIFY_PATH = '/mobify'
+export const PROXY_PATH = `${MOBIFY_PATH}/proxy`
+export const LOCAL_BUNDLE_PATH = `${MOBIFY_PATH}/bundle/development`
+export const SLAS_PRIVATE_PROXY_PATH = `${MOBIFY_PATH}/slas/private`
+
 export const SLAS_SECRET_WARNING_MSG =
     'You are potentially exposing SLAS secret on browser. Make sure to keep it safe and secure!'
 

packages/commerce-sdk-react/src/test-utils.tsx

@@ -16,13 +16,15 @@ import {
 import nock from 'nock'
 import CommerceApiProvider, {CommerceApiProviderProps} from './provider'
 import userEvent from '@testing-library/user-event'
+import {PROXY_PATH} from './constant'
+
 // Note: this host does NOT exist
 // it is intentional b/c we can catch those unintercepted requests
 // from log easily. You should always make sure all requests are nocked.
 export const DEFAULT_TEST_HOST = 'http://localhost:8888'
 
 export const DEFAULT_TEST_CONFIG = {
-    proxy: `${DEFAULT_TEST_HOST}/mobify/proxy/api`,
+    proxy: `${DEFAULT_TEST_HOST}${PROXY_PATH}/api`,
     redirectURI: `${DEFAULT_TEST_HOST}/callback`,
     clientId: '12345678-1234-1234-1234-123412341234',
     organizationId: 'f_ecom_zzrmy_orgf_001',
@@ -31,7 +33,7 @@ export const DEFAULT_TEST_CONFIG = {
     locale: 'en-US',
     currency: 'USD',
     fetchedToken: 'test-token',
-    OCAPISessionsURL: `${DEFAULT_TEST_HOST}/mobify/proxy/ocapi/s/RefArch/dw/shop/v22_8/sessions`
+    OCAPISessionsURL: `${DEFAULT_TEST_HOST}${PROXY_PATH}/ocapi/s/RefArch/dw/shop/v22_8/sessions`
 }
 
 export const createQueryClient = () => {

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

@@ -18,6 +18,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 {createUrlTemplate} from '@salesforce/retail-react-app/app/utils/url'
 
 import {CommerceApiProvider} from '@salesforce/commerce-sdk-react'
@@ -55,7 +56,7 @@ const AppConfig = ({children, locals = {}}) => {
             redirectURI={`${appOrigin}/callback`}
             proxy={`${appOrigin}${commerceApiConfig.proxyPath}`}
             headers={headers}
-            OCAPISessionsURL={`${appOrigin}/mobify/proxy/ocapi/s/${locals.site?.id}/dw/shop/v22_8/sessions`}
+            OCAPISessionsURL={`${appOrigin}${proxyBasePath}/ocapi/s/${locals.site?.id}/dw/shop/v22_8/sessions`}
             {{#if answers.project.commerce.isSlasPrivate}}
             // Set 'enablePWAKitPrivateClient' to true use SLAS private client login flows.
             // Make sure to also enable useSLASPrivateClient in ssr.js when enabling this setting.

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

@@ -18,6 +18,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 {createUrlTemplate} from '@salesforce/retail-react-app/app/utils/url'
 
 import {CommerceApiProvider} from '@salesforce/commerce-sdk-react'
@@ -55,7 +56,7 @@ const AppConfig = ({children, locals = {}}) => {
             redirectURI={`${appOrigin}/callback`}
             proxy={`${appOrigin}${commerceApiConfig.proxyPath}`}
             headers={headers}
-            OCAPISessionsURL={`${appOrigin}/mobify/proxy/ocapi/s/${locals.site?.id}/dw/shop/v22_8/sessions`}
+            OCAPISessionsURL={`${appOrigin}${proxyBasePath}/ocapi/s/${locals.site?.id}/dw/shop/v22_8/sessions`}
             {{#if answers.project.commerce.isSlasPrivate}}
             // Set 'enablePWAKitPrivateClient' to true use SLAS private client login flows.
             // Make sure to also enable useSLASPrivateClient in ssr.js when enabling this setting.

packages/pwa-kit-dev/src/configs/jest/jest.config.js

@@ -26,6 +26,9 @@ module.exports = {
         DEBUG: true,
         NODE_ENV: 'test',
         Progressive: {
+            // BuildOrigin can be any non-empty string. It does not have to be /mobify/xyz
+            // This is used by tests that call getAssetUrl in pwa-kit-react-sdk to simulate
+            // asset urls.
             buildOrigin: '/mobify/bundle/development/'
         }
     },

packages/pwa-kit-dev/src/configs/webpack/config.js

@@ -121,6 +121,18 @@ const getAppEntryPoint = () => {
     return resolve('./', EXT_OVERRIDES_DIR_NO_SLASH, 'app', 'main')
 }
 
+const getPublicPathEntryPoint = () => {
+    return resolve(
+        projectDir,
+        'node_modules',
+        '@salesforce',
+        'pwa-kit-dev',
+        'ssr',
+        'server',
+        'public-path'
+    )
+}
+
 const findDepInStack = (pkg) => {
     // Look for the SDK node_modules in two places because in CI,
     // pwa-kit-dev is published under a 'dist' directory, which
@@ -394,7 +406,11 @@ const enableReactRefresh = (config) => {
         },
         entry: {
             ...config.entry,
-            main: ['webpack-hot-middleware/client?path=/__mrt/hmr', getAppEntryPoint()]
+            main: [
+                'webpack-hot-middleware/client?path=/__mrt/hmr',
+                getPublicPathEntryPoint(),
+                getAppEntryPoint()
+            ]
         },
         plugins: [
             ...config.plugins,
@@ -403,12 +419,7 @@ const enableReactRefresh = (config) => {
             new ReactRefreshWebpackPlugin({
                 overlay: false
             })
-        ],
-        output: {
-            ...config.output,
-            // Setting this so that *.hot-update.json requests are resolving
-            publicPath: '/mobify/bundle/development/'
-        }
+        ]
     }
 }
 

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

@@ -19,6 +19,7 @@ import open from 'open'
 import requireFromString from 'require-from-string'
 import {RemoteServerFactory} from '@salesforce/pwa-kit-runtime/ssr/server/build-remote-server'
 import {proxyConfigs} from '@salesforce/pwa-kit-runtime/utils/ssr-shared'
+import {bundleBasePath} from '@salesforce/pwa-kit-runtime/utils/ssr-namespace-paths'
 import {
     SERVER,
     CLIENT,
@@ -166,7 +167,7 @@ export const DevServerMixin = {
             app.__hotServerMiddleware = webpackHotServerMiddleware(app.__compiler)
         }
 
-        app.use('/mobify/bundle/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)
@@ -209,7 +210,7 @@ export const DevServerMixin = {
         // Proxy bundle asset requests to the local
         // build directory.
         app.use(
-            '/mobify/bundle/development',
+            `${bundleBasePath}/development`,
             express.static(path.resolve(process.cwd(), 'src'), {
                 dotFiles: 'deny',
                 setHeaders: setLocalAssetHeaders,

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

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2024, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+/**
+ * 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/`