@salesforce/pwa-kit-create-app 3.11.0 → 3.12.0-dev

package/assets/bootstrap/js/config/default.js.hbs

@@ -6,8 +6,26 @@
  */
 /* eslint-disable @typescript-eslint/no-var-requires */
 const sites = require('./sites.js')
+const {parseCommerceAgentSettings} = require('./utils.js')
+
 module.exports = {
     app: {
+        // Enable the store locator and shop the store feature.
+        storeLocatorEnabled: true,
+        // Enable the multi-ship feature.
+        multishipEnabled: true,
+        // Enable partial hydration capabilities via Island component
+        {{#if answers.project.partialHydrationEnabled}}
+        partialHydrationEnabled: {{answers.project.partialHydrationEnabled}},
+        {{else}}
+        partialHydrationEnabled: false,
+        {{/if}}
+        // Commerce shopping agent configuration for embedded messaging service
+        // This enables an agentic shopping experience in the application
+        // This property accepts either a JSON string or a plain JavaScript object.
+        // The value is set from the COMMERCE_AGENT_SETTINGS environment variable.
+        // If the COMMERCE_AGENT_SETTINGS environment variable is not set, the feature is disabled.
+        commerceAgent: parseCommerceAgentSettings(process.env.COMMERCE_AGENT_SETTINGS),
         // Customize how your 'site' and 'locale' are displayed in the url.
         url: {
             {{#if answers.project.demo.enableDemoSettings}}
@@ -109,6 +127,10 @@ module.exports = {
             tenantId: '{{answers.project.dataCloud.tenantId}}'
         }
     },
+    // Experimental: The base path for the app. This is the path that will be prepended to all /mobify routes,
+    // callback routes, and Express routes.
+    // Setting this to `/` or an empty string will result in the above routes not having a base path.
+    envBasePath: '/',
     // This list contains server-side only libraries that you don't want to be compiled by webpack
     externals: [],
     // Page not found url for your app

package/assets/bootstrap/js/config/utils.js.hbs

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2021, 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
+ */
+
+/**
+ * Safely parses commerce agent settings from either a JSON string or object
+ * @param {string|object} settings - The commerce agent settings
+ * @returns {object} Parsed commerce agent settings object
+ */
+function parseCommerceAgentSettings(settings) {
+    // Default configuration when no settings are provided
+    const defaultConfig = {
+        enabled: 'false',
+        askAgentOnSearch: 'false',
+        embeddedServiceName: '',
+        embeddedServiceEndpoint: '',
+        scriptSourceUrl: '',
+        scrt2Url: '',
+        salesforceOrgId: '',
+        commerceOrgId: '',
+        siteId: ''
+    }
+
+    // If settings is already an object, return it
+    if (typeof settings === 'object' && settings !== null) {
+        return settings
+    }
+
+    // If settings is a string, try to parse it
+    if (typeof settings === 'string') {
+        try {
+            return JSON.parse(settings)
+        } catch (error) {
+            console.warn('Invalid COMMERCE_AGENT_SETTINGS format, using defaults:', error.message)
+            return defaultConfig
+        }
+    }
+
+    // If settings is undefined/null, return defaults
+    return defaultConfig
+}
+
+module.exports = {
+    parseCommerceAgentSettings
+}

package/assets/bootstrap/js/overrides/app/components/_app-config/index.jsx.hbs

@@ -18,15 +18,20 @@ 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 {
+    getEnvBasePath,
+    slasPrivateProxyPath
+} 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'
+import {isAbsoluteURL} from '@salesforce/retail-react-app/app/page-designer/utils'
 
 import {CommerceApiProvider} from '@salesforce/commerce-sdk-react'
 import {withReactQuery} from '@salesforce/pwa-kit-react-sdk/ssr/universal/components/with-react-query'
 import {useCorrelationId} from '@salesforce/pwa-kit-react-sdk/ssr/universal/hooks'
 import {getAppOrigin} from '@salesforce/pwa-kit-react-sdk/utils/url'
 import {ReactQueryDevtools} from '@tanstack/react-query-devtools'
+import {generateSfdcUserAgent} from '@salesforce/retail-react-app/app/utils/sfdc-user-agent-utils'
 import {
     DEFAULT_DNT_STATE,
     STORE_LOCATOR_RADIUS,
@@ -38,6 +43,8 @@ import {
     STORE_LOCATOR_SUPPORTED_COUNTRIES
 } from '@salesforce/retail-react-app/app/constants'
 
+const sfdcUserAgent = generateSfdcUserAgent()
+
 /**
  * Use the AppConfig component to inject extra arguments into the getProps
  * methods for all Route Components in the app – typically you'd want to do this
@@ -49,7 +56,8 @@ import {
 const AppConfig = ({children, locals = {}}) => {
     const {correlationId} = useCorrelationId()
     const headers = {
-        'correlation-id': correlationId
+        'correlation-id': correlationId,
+        sfdc_user_agent: sfdcUserAgent
     }
 
     const commerceApiConfig = locals.appConfig.commerceAPI
@@ -68,6 +76,14 @@ const AppConfig = ({children, locals = {}}) => {
         supportedCountries: STORE_LOCATOR_SUPPORTED_COUNTRIES
     }
 
+    // Set absolute uris for CommerceApiProvider proxies and callbacks
+    const redirectURI = `${appOrigin}${getEnvBasePath()}/callback`
+    const proxy = `${appOrigin}${getEnvBasePath()}${commerceApiConfig.proxyPath}`
+    const slasPrivateClientProxyEndpoint = `${appOrigin}${getEnvBasePath()}${slasPrivateProxyPath}`
+    const passwordlessLoginCallbackURI = isAbsoluteURL(passwordlessCallback)
+        ? passwordlessCallback
+        : `${appOrigin}${getEnvBasePath()}${passwordlessCallback}`
+
     return (
         <CommerceApiProvider
             shortCode={commerceApiConfig.parameters.shortCode}
@@ -76,17 +92,22 @@ 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}
             defaultDnt={DEFAULT_DNT_STATE}
             logger={createLogger({packageName: 'commerce-sdk-react'})}
-            passwordlessLoginCallbackURI={passwordlessCallback}
-            {{#if answers.project.commerce.isSlasPrivate}}
-            // Set 'enablePWAKitPrivateClient' to true use SLAS private client login flows.
+            passwordlessLoginCallbackURI={passwordlessLoginCallbackURI}
+            // Set 'enablePWAKitPrivateClient' to true to use SLAS private client login flows.
             // Make sure to also enable useSLASPrivateClient in ssr.js when enabling this setting.
+            {{#if answers.project.commerce.isSlasPrivate}}
             enablePWAKitPrivateClient={true}
+            {{else}}
+            enablePWAKitPrivateClient={false}
             {{/if}}
+            privateClientProxyEndpoint={slasPrivateClientProxyEndpoint}
+            // Uncomment 'hybridAuthEnabled' if the current site has Hybrid Auth enabled. Do NOT set this flag for hybrid storefronts using Plugin SLAS.
+            // hybridAuthEnabled={true}
         >
             <MultiSiteProvider site={locals.site} locale={locals.locale} buildUrl={locals.buildUrl}>
                 <StoreLocatorProvider config={storeLocatorConfig}>

package/assets/bootstrap/js/overrides/app/constants.js.hbs

@@ -5,10 +5,10 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-/* 
+/*
     Hello there! This is a demonstration of how to override a file from the base template.
-    
-    It's necessary that the module export interface remain consistent, 
+
+    It's necessary that the module export interface remain consistent,
     as other files in the base template rely on constants.js, thus we
     import the underlying constants.js, modifies it and re-export it.
 */

package/assets/bootstrap/js/overrides/app/main.jsx

@@ -5,10 +5,11 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 import {start, registerServiceWorker} from '@salesforce/pwa-kit-react-sdk/ssr/browser/main'
+import {getEnvBasePath} from '@salesforce/pwa-kit-runtime/utils/ssr-namespace-paths'
 
 const main = () => {
     // The path to your service worker should match what is set up in ssr.js
-    return Promise.all([start(), registerServiceWorker('/worker.js')])
+    return Promise.all([start(), registerServiceWorker(`${getEnvBasePath()}/worker.js`)])
 }
 
 main()

package/assets/bootstrap/js/overrides/app/ssr.js.hbs

@@ -44,6 +44,13 @@ const options = {
     // environment variable as this endpoint will return HTTP 501 if it is not set
     useSLASPrivateClient: {{answers.project.commerce.isSlasPrivate}},
 
+    // If you wish to use additional SLAS endpoints that require private clients,
+    // customize this regex to include the additional endpoints the custom SLAS
+    // private client secret handler will inject an Authorization header.
+    // The default regex is defined in this file: https://github.com/SalesforceCommerceCloud/pwa-kit/blob/develop/packages/pwa-kit-runtime/src/ssr/server/build-remote-server.js
+    // applySLASPrivateClientToEndpoints:
+    //     /\/oauth2\/(token|passwordless\/(login|token)|password\/(reset|action))/,
+
     // If this is enabled, any HTTP header that has a non ASCII value will be URI encoded
     // If there any HTTP headers that have been encoded, an additional header will be
     // passed, `x-encoded-headers`, containing a comma separated list
@@ -282,32 +289,45 @@ const {handler} = runtime.createHandler(options, (app) => {
     // Set default HTTP security headers required by PWA Kit
     app.use(defaultPwaKitSecurityHeaders)
     // Set custom HTTP security headers
+    {{#if answers.project.contentSecurityPolicy}}
+    const contentSecurityPolicy = {{{json answers.project.contentSecurityPolicy}}}
+    {{else}}
+    const contentSecurityPolicy = {
+        useDefaults: true,
+        directives: {
+            'img-src': [
+                // Default source for product images - replace with your CDN
+                '*.commercecloud.salesforce.com',
+                '*.demandware.net'
+            ],
+            'script-src': [
+                // Used by the service worker in /worker/main.js
+                'storage.googleapis.com'
+            ],
+            'connect-src': [
+                // Connect to Einstein APIs
+                'api.cquotient.com',
+                // Connect to DataCloud APIs
+                '*.c360a.salesforce.com',
+                // Connect to SCRT2 URLs
+                '*.salesforce-scrt.com'
+            ],
+            'frame-src': [
+                // Allow frames from Salesforce site.com (Needed for MIAW)
+                '*.site.com'
+            ]
+        }
+    }
+    {{/if}}
+
     app.use(
         helmet({
-            contentSecurityPolicy: {
-                useDefaults: true,
-                directives: {
-                    'img-src': [
-                        // Default source for product images - replace with your CDN
-                        '*.commercecloud.salesforce.com',
-                        '*.demandware.net'
-                    ],
-                    'script-src': [
-                        // Used by the service worker in /worker/main.js
-                        'storage.googleapis.com'
-                    ],
-                    'connect-src': [
-                        // Connect to Einstein APIs
-                        'api.cquotient.com',
-                        '*.c360a.salesforce.com'
-                    ]
-                }
-            }
+            contentSecurityPolicy
         })
     )
 
     // Handle the redirect from SLAS as to avoid error
-    app.get('/callback?*', (req, res) => {
+    app.get('/callback', (req, res) => {
         // This endpoint does nothing and is not expected to change
         // Thus we cache it for a year to maximize performance
         res.set('Cache-Control', `max-age=31536000`)

package/assets/templates/@salesforce/retail-react-app/app/components/_app-config/index.jsx.hbs

@@ -19,14 +19,19 @@ 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 {
+    getEnvBasePath,
+    slasPrivateProxyPath
+} 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'
+import {isAbsoluteURL} from '@salesforce/retail-react-app/app/page-designer/utils'
 
 import {CommerceApiProvider} from '@salesforce/commerce-sdk-react'
 import {withReactQuery} from '@salesforce/pwa-kit-react-sdk/ssr/universal/components/with-react-query'
 import {useCorrelationId} from '@salesforce/pwa-kit-react-sdk/ssr/universal/hooks'
 import {ReactQueryDevtools} from '@tanstack/react-query-devtools'
+import {generateSfdcUserAgent} from '@salesforce/retail-react-app/app/utils/sfdc-user-agent-utils'
 import {DEFAULT_DNT_STATE} from '@salesforce/retail-react-app/app/constants'
 import {
     STORE_LOCATOR_RADIUS,
@@ -38,6 +43,8 @@ import {
     STORE_LOCATOR_SUPPORTED_COUNTRIES
 } from '@salesforce/retail-react-app/app/constants'
 
+const sfdcUserAgent = generateSfdcUserAgent()
+
 /**
  * Use the AppConfig component to inject extra arguments into the getProps
  * methods for all Route Components in the app – typically you'd want to do this
@@ -49,7 +56,8 @@ import {
 const AppConfig = ({children, locals = {}}) => {
     const {correlationId} = useCorrelationId()
     const headers = {
-        'correlation-id': correlationId
+        'correlation-id': correlationId,
+        sfdc_user_agent: sfdcUserAgent
     }
 
     const commerceApiConfig = locals.appConfig.commerceAPI
@@ -68,6 +76,14 @@ const AppConfig = ({children, locals = {}}) => {
         supportedCountries: STORE_LOCATOR_SUPPORTED_COUNTRIES
     }
 
+    // Set absolute uris for CommerceApiProvider proxies and callbacks
+    const redirectURI = `${appOrigin}${getEnvBasePath()}/callback`
+    const proxy = `${appOrigin}${getEnvBasePath()}${commerceApiConfig.proxyPath}`
+    const slasPrivateClientProxyEndpoint = `${appOrigin}${getEnvBasePath()}${slasPrivateProxyPath}`
+    const passwordlessLoginCallbackURI = isAbsoluteURL(passwordlessCallback)
+        ? passwordlessCallback
+        : `${appOrigin}${getEnvBasePath()}${passwordlessCallback}`
+
     return (
         <CommerceApiProvider
             shortCode={commerceApiConfig.parameters.shortCode}
@@ -76,17 +92,22 @@ 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}
             defaultDnt={DEFAULT_DNT_STATE}
             logger={createLogger({packageName: 'commerce-sdk-react'})}
             passwordlessLoginCallbackURI={passwordlessCallback}
-            {{#if answers.project.commerce.isSlasPrivate}}
-            // Set 'enablePWAKitPrivateClient' to true use SLAS private client login flows.
+            // Set 'enablePWAKitPrivateClient' to true to use SLAS private client login flows.
             // Make sure to also enable useSLASPrivateClient in ssr.js when enabling this setting.
+            {{#if answers.project.commerce.isSlasPrivate}}
             enablePWAKitPrivateClient={true}
+            {{else}}
+            enablePWAKitPrivateClient={false}
             {{/if}}
+            privateClientProxyEndpoint={slasPrivateClientProxyEndpoint}
+            // Uncomment 'hybridAuthEnabled' if the current site has Hybrid Auth enabled. Do NOT set this flag for hybrid storefronts using Plugin SLAS.
+            // hybridAuthEnabled={true}
         >
             <MultiSiteProvider site={locals.site} locale={locals.locale} buildUrl={locals.buildUrl}>
                 <StoreLocatorProvider config={storeLocatorConfig}>

package/assets/templates/@salesforce/retail-react-app/app/ssr.js.hbs

@@ -44,6 +44,13 @@ const options = {
     // environment variable as this endpoint will return HTTP 501 if it is not set
     useSLASPrivateClient: {{answers.project.commerce.isSlasPrivate}},
 
+    // If you wish to use additional SLAS endpoints that require private clients,
+    // customize this regex to include the additional endpoints the custom SLAS
+    // private client secret handler will inject an Authorization header.
+    // The default regex is defined in this file: https://github.com/SalesforceCommerceCloud/pwa-kit/blob/develop/packages/pwa-kit-runtime/src/ssr/server/build-remote-server.js
+    // applySLASPrivateClientToEndpoints:
+    //     /\/oauth2\/(token|passwordless\/(login|token)|password\/(reset|action))/,
+
     // If this is enabled, any HTTP header that has a non ASCII value will be URI encoded
     // If there any HTTP headers that have been encoded, an additional header will be
     // passed, `x-encoded-headers`, containing a comma separated list
@@ -282,31 +289,45 @@ const {handler} = runtime.createHandler(options, (app) => {
     // Set default HTTP security headers required by PWA Kit
     app.use(defaultPwaKitSecurityHeaders)
     // Set custom HTTP security headers
+    {{#if answers.project.contentSecurityPolicy}}
+    const contentSecurityPolicy = {{{json answers.project.contentSecurityPolicy}}}
+    {{else}}
+    const contentSecurityPolicy = {
+        useDefaults: true,
+        directives: {
+            'img-src': [
+                // Default source for product images - replace with your CDN
+                '*.commercecloud.salesforce.com',
+                '*.demandware.net'
+            ],
+            'script-src': [
+                // Used by the service worker in /worker/main.js
+                'storage.googleapis.com'
+            ],
+            'connect-src': [
+                // Connect to Einstein APIs
+                'api.cquotient.com',
+                // Connect to DataCloud APIs
+                '*.c360a.salesforce.com',
+                // Connect to SCRT2 URLs
+                '*.salesforce-scrt.com'
+            ],
+            'frame-src': [
+                // Allow frames from Salesforce site.com (Needed for MIAW)
+                '*.site.com'
+            ]
+        }
+    }
+    {{/if}}
+
     app.use(
         helmet({
-            contentSecurityPolicy: {
-                useDefaults: true,
-                directives: {
-                    'img-src': [
-                        // Default source for product images - replace with your CDN
-                        '*.commercecloud.salesforce.com'
-                    ],
-                    'script-src': [
-                        // Used by the service worker in /worker/main.js
-                        'storage.googleapis.com'
-                    ],
-                    'connect-src': [
-                        // Connect to Einstein APIs
-                        'api.cquotient.com',
-                        '*.c360a.salesforce.com'
-                    ]
-                }
-            }
+            contentSecurityPolicy
         })
     )
 
     // Handle the redirect from SLAS as to avoid error
-    app.get('/callback?*', (req, res) => {
+    app.get('/callback', (req, res) => {
         // This endpoint does nothing and is not expected to change
         // Thus we cache it for a year to maximize performance
         res.set('Cache-Control', `max-age=31536000`)

package/assets/templates/@salesforce/retail-react-app/config/default.js.hbs

@@ -6,8 +6,26 @@
  */
 /* eslint-disable @typescript-eslint/no-var-requires */
 const sites = require('./sites.js')
+const {parseCommerceAgentSettings} = require('./utils.js')
+
 module.exports = {
     app: {
+        // Enable the store locator and shop the store feature.
+        storeLocatorEnabled: true,
+        // Enable the multi-ship feature.
+        multishipEnabled: true,
+        // Enable partial hydration capabilities via Island component
+        {{#if answers.project.partialHydrationEnabled}}
+        partialHydrationEnabled: {{answers.project.partialHydrationEnabled}},
+        {{else}}
+        partialHydrationEnabled: false,
+        {{/if}}
+        // Commerce shopping agent configuration for embedded messaging service
+        // This enables an agentic shopping experience in the application
+        // This property accepts either a JSON string or a plain JavaScript object.
+        // The value is set from the COMMERCE_AGENT_SETTINGS environment variable.
+        // If the COMMERCE_AGENT_SETTINGS environment variable is not set, the feature is disabled.
+        commerceAgent: parseCommerceAgentSettings(process.env.COMMERCE_AGENT_SETTINGS),
         // Customize settings for your url
         url: {
             {{#if answers.project.demo.enableDemoSettings}}

package/assets/templates/@salesforce/retail-react-app/config/utils.js.hbs

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2021, 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
+ */
+
+/**
+ * Safely parses commerce agent settings from either a JSON string or object
+ * @param {string|object} settings - The commerce agent settings
+ * @returns {object} Parsed commerce agent settings object
+ */
+function parseCommerceAgentSettings(settings) {
+    // Default configuration when no settings are provided
+    const defaultConfig = {
+        enabled: 'false',
+        askAgentOnSearch: 'false',
+        embeddedServiceName: '',
+        embeddedServiceEndpoint: '',
+        scriptSourceUrl: '',
+        scrt2Url: '',
+        salesforceOrgId: '',
+        commerceOrgId: '',
+        siteId: ''
+    }
+
+    // If settings is already an object, return it
+    if (typeof settings === 'object' && settings !== null) {
+        return settings
+    }
+
+    // If settings is a string, try to parse it
+    if (typeof settings === 'string') {
+        try {
+            return JSON.parse(settings)
+        } catch (error) {
+            console.warn('Invalid COMMERCE_AGENT_SETTINGS format, using defaults:', error.message)
+            return defaultConfig
+        }
+    }
+
+    // If settings is undefined/null, return defaults
+    return defaultConfig
+}
+
+module.exports = {
+    parseCommerceAgentSettings
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/pwa-kit-create-app",
-  "version": "3.11.0",
+  "version": "3.12.0-dev",
   "description": "Salesforce's project generator tool",
   "homepage": "https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/pwa-kit-create-app#readme",
   "bugs": {
@@ -39,13 +39,13 @@
     "tar": "^6.2.1"
   },
   "devDependencies": {
-    "@salesforce/pwa-kit-dev": "3.11.0",
-    "internal-lib-build": "3.11.0",
+    "@salesforce/pwa-kit-dev": "3.12.0-dev",
+    "internal-lib-build": "3.12.0-dev",
     "verdaccio": "^5.22.1"
   },
   "engines": {
     "node": "^16.11.0 || ^18.0.0 || ^20.0.0 || ^22.0.0",
     "npm": "^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0"
   },
-  "gitHead": "ce537dc2e48c980ca78607e03125f9cccf8314c5"
+  "gitHead": "60d9a47ad71824709be52bbe1110b092f7698244"
 }

package/program.json

@@ -472,6 +472,54 @@
                 },
                 "private": true
             },
+            {
+                "id": "retail-react-app-performance-tests",
+                "name": "Retail React App for performance tests",
+                "description": "",
+                "templateId": "retail-react-app",
+                "answers": {
+                    "project.extend": false,
+                    "project.hybrid": false,
+                    "project.name": "retail-react-app",
+                    "project.commerce.instanceUrl": "https://zzrf-001.dx.commercecloud.salesforce.com",
+                    "project.commerce.clientId": "9629ef22-f8b8-4987-90ac-b815be3940c8",
+                    "project.commerce.siteId": "SiteNemesis",
+                    "project.commerce.organizationId": "f_ecom_tbbn_prd",
+                    "project.commerce.shortCode": "performance-001",
+                    "project.commerce.isSlasPrivate": true,
+                    "project.einstein.clientId": "1ea06c6e-c936-4324-bcf0-fada93f83bb1",
+                    "project.einstein.siteId": "aaij-MobileFirst",
+                    "project.dataCloud.appSourceId": "7ae070a6-f4ec-4def-a383-d9cacc3f20a1",
+                    "project.dataCloud.tenantId": "g82wgnrvm-ywk9dggrrw8mtggy.pc-rnd",
+                    "project.demo.enableDemoSettings": false,
+
+                    "project.partialHydrationEnabled": true,
+                    "project.contentSecurityPolicy": {
+                        "useDefaults": true,
+                        "directives": {
+                            "img-src": [
+                                "*.commercecloud.salesforce.com",
+                                "*.demandware.net",
+                                "*.sfcc-store-internal.net"
+                            ],
+                            "script-src": [
+                                "storage.googleapis.com",
+                                "*.sfcc-store-internal.net"
+                            ],
+                            "connect-src": [
+                                "api.cquotient.com",
+                                "*.c360a.salesforce.com",
+                                "*.salesforce-scrt.com",
+                                "*.sfcc-store-internal.net"
+                            ],
+                            "frame-src": [
+                                "*.site.com"
+                            ]
+                        }
+                    }
+                },
+                "private": true
+            },
             {
                 "id": "typescript-minimal-test-project",
                 "name": "Template Minimal Test Project",
@@ -723,7 +771,7 @@
             {
                 "name": "--stdio",
                 "description": "Accept project generation answers from stdin as JSON"
-            }, 
+            },
             {
                 "name": "--displayProgram",
                 "description": "Display the program.json file detailing the program schema/data and exit"

package/scripts/create-mobify-app.js

@@ -91,6 +91,9 @@ sh.set('-e')
 // will ensure those escaped double quotes are still escaped after processing the template.
 Handlebars.registerHelper('script', (object) => object.replaceAll('"', '\\"'))
 
+// Helper to convert JavaScript objects to JSON strings
+Handlebars.registerHelper('json', (object) => JSON.stringify(object, null, 4))
+
 // Validations
 const validPreset = (preset) => {
     return ALL_PRESET_NAMES.includes(preset)
@@ -111,7 +114,6 @@ const TEMPLATE_SOURCE_BUNDLE = 'bundle'
 
 const BOOTSTRAP_DIR = p.join(__dirname, '..', 'assets', 'bootstrap', 'js')
 const ASSETS_TEMPLATES_DIR = p.join(__dirname, '..', 'assets', 'templates')
-const CURSOR_RULES_FROM_DIR = p.join(__dirname, '..', 'assets', 'cursor-rules')
 const PRIVATE_PRESET_NAMES = PRESETS.filter(({private}) => !!private).map(({id}) => id)
 const PUBLIC_PRESET_NAMES = PRESETS.filter(({private}) => !private).map(({id}) => id)
 const ALL_PRESET_NAMES = PRIVATE_PRESET_NAMES.concat(PUBLIC_PRESET_NAMES)
@@ -234,6 +236,38 @@ const expandKey = (key, value) =>
 const expandObject = (obj = {}) =>
     Object.keys(obj).reduce((acc, curr) => merge(acc, expandKey(curr, obj[curr])), {})
 
+/**
+ * If the generated project is based on a template that includes '.cursor/rules',
+ * this function copies the rules from the installed node_modules into the
+ * top-level of the generated project.
+ * @param {string} outputDir - The directory of the generated project
+ * @private
+ */
+const copyCursorRules = (outputDir) => {
+    const cursorRulesFromDir = p.join(
+        outputDir,
+        'node_modules',
+        '@salesforce',
+        'retail-react-app',
+        '.cursor',
+        'rules'
+    )
+    if (sh.test('-e', cursorRulesFromDir)) {
+        const outputCursorRulesDir = p.join(outputDir, '.cursor', 'rules')
+
+        // Create the directory if it doesn't exist
+        if (!sh.test('-e', outputCursorRulesDir)) {
+            fs.mkdirSync(outputCursorRulesDir, {recursive: true})
+        }
+
+        // Copy the contents of cursorRulesFromDir to outputCursorRulesDir
+        const files = fs.readdirSync(cursorRulesFromDir)
+        files.forEach((file) => {
+            sh.cp('-rf', p.join(cursorRulesFromDir, file), outputCursorRulesDir)
+        })
+    }
+}
+
 /**
  * Envoke the "npm install" command for the provided project directory.
  *
@@ -352,6 +386,11 @@ const runGenerator = (context, {outputDir, templateVersion, verbose}) => {
         assets.forEach((asset) => {
             sh.cp('-rf', p.join(packagePath, asset), outputDir)
         })
+        // Install dependencies for the newly minted project.
+        npmInstall(outputDir, {verbose})
+
+        // Extended project does not contain cursor rules and need explicit copy
+        copyCursorRules(outputDir)
     } else {
         console.log('Copying base template from package or npm: ', packagePath, outputDir)
         // Copy the base template either from the package or npm.
@@ -389,26 +428,10 @@ const runGenerator = (context, {outputDir, templateVersion, verbose}) => {
 
         // Clean up
         sh.rm('-rf', tmp)
-    }
 
-    // Copy the .cursor/rules directory if it exists
-    if (sh.test('-e', CURSOR_RULES_FROM_DIR)) {
-        const outputCursorRulesDir = p.join(outputDir, '.cursor', 'rules')
-
-        // Create the directory if it doesn't exist
-        if (!sh.test('-e', outputCursorRulesDir)) {
-            fs.mkdirSync(outputCursorRulesDir, {recursive: true})
-        }
-
-        // Copy the contents of CURSOR_RULES_FROM_DIR to outputCursorRulesDir
-        const files = fs.readdirSync(CURSOR_RULES_FROM_DIR)
-        files.forEach((file) => {
-            sh.cp('-rf', p.join(CURSOR_RULES_FROM_DIR, file), outputCursorRulesDir)
-        })
+        // Install dependencies for the newly minted project.
+        npmInstall(outputDir, {verbose})
     }
-
-    // Install dependencies for the newly minted project.
-    npmInstall(outputDir, {verbose})
 }
 
 const foundNode = process.versions.node

package/assets/cursor-rules/accessibility-rule.mdc

@@ -1,8 +0,0 @@
----
-description: Check and verify accessibility on local project
-globs: 
-alwaysApply: false
----
-To check accessibility of a project, use the accessibility rules defined in PROJECT_ROOT/.cursor/rules/cursor-accessibility-mdc/ directory.
-Run an automated scan for the entire codebase within the project and check for any violations.
-Show the scanned results in summary and detailed violations if any.

package/assets/cursor-rules/cursor-accessibility-mdc/accessibility-button-name.mdc

@@ -1,26 +0,0 @@
----
-description: When accessibility is checked. Check if Buttons must have a discernible name using text or aria attributes
-globs: 
-alwaysApply: false
----
-
-# Rule: accessibility-button-name
-
-Buttons must have a discernible name using text or aria attributes
-
-## 🔍 Pattern
-
-```regex
-<button(?![^>]*\b(aria-label|aria-labelledby|title|name)=)
-```
-
-## 📍 Examples
-
-```tsx
-// ❌ Bad
-<button></button>
-// ✅ Good
-<button>Submit</button>
-// ✅ Good
-<button aria-label="Close dialog"><XIcon /></button>
-```

package/assets/cursor-rules/cursor-accessibility-mdc/accessibility-heading-order.mdc

@@ -1,26 +0,0 @@
----
-description: When accessibility is checked. Check if heading levels should increase sequentially for semantic structure
-globs: 
-alwaysApply: false
----
-
-# Rule: accessibility-heading-order
-
-Heading levels should increase sequentially for semantic structure
-
-## 🔍 Pattern
-
-```regex
-<h([3-6])>
-```
-
-## 📍 Examples
-
-```tsx
-// ❌ Bad
-<h1>Main Title</h1>
-<h4>Subsection</h4>
-// ✅ Good
-<h1>Main Title</h1>
-<h2>Subsection</h2>
-```

package/assets/cursor-rules/cursor-accessibility-mdc/accessibility-image-alt.mdc

@@ -1,24 +0,0 @@
----
-description: When accessibility is checked. Ensure all <img> tags include descriptive alt attributes
-globs: 
-alwaysApply: false
----
-
-# Rule: accessibility-image-alt
-
-Ensure all <img> tags include descriptive alt attributes
-
-## 🔍 Pattern
-
-```regex
-<img(?![^>]*\balt=)
-```
-
-## 📍 Examples
-
-```tsx
-// ❌ Bad
-<img src="photo.jpg" />
-// ✅ Good
-<img src="photo.jpg" alt="Company logo" />
-```

package/assets/cursor-rules/cursor-accessibility-mdc/accessibility-input-label.mdc

@@ -1,27 +0,0 @@
----
-description: When accessibility is checked. Check if Input fields must have a label or aria-label for screen readers
-globs: 
-alwaysApply: false
----
-
-# Rule: accessibility-input-label
-
-Input fields must have a label or aria-label for screen readers
-
-## 🔍 Pattern
-
-```regex
-<input(?![^>]*(aria-label|aria-labelledby|id=))
-```
-
-## 📍 Examples
-
-```tsx
-// ❌ Bad
-<input type="text" />
-// ✅ Good
-<input aria-label="Search" />
-// ✅ Good with label
-<label htmlFor="email">Email</label>
-<input id="email" type="text" />
-```

package/assets/cursor-rules/cursor-accessibility-mdc/accessibility-link-name.mdc

@@ -1,26 +0,0 @@
----
-description: When accessibility is checked. Check if Anchor tags must have accessible names
-globs: 
-alwaysApply: false
----
-
-# Rule: accessibility-link-name
-
-Anchor tags must have accessible names
-
-## 🔍 Pattern
-
-```regex
-<a(?![^>]*\b(aria-label|aria-labelledby|title)=)(?![^>]*>\s*\w+\s*</a>)
-```
-
-## 📍 Examples
-
-```tsx
-// ❌ Bad
-<a href="/profile"></a>
-// ✅ Good
-<a href="/profile">Your Profile</a>
-// ✅ Good
-<a href="/profile" aria-label="Profile page"><UserIcon /></a>
-```

package/assets/cursor-rules/cursor-rule.mdc

@@ -1,66 +0,0 @@
----
-description: How to add or edit Cursor rules in our project
-globs: 
-alwaysApply: false
----
-# Cursor Rules Location
-
-How to add new cursor rules to the project
-
-1. Always place rule files in PROJECT_ROOT/.cursor/rules/:
-    ```
-    .cursor/rules/
-    ├── your-rule-name.mdc
-    ├── another-rule.mdc
-    └── ...
-    ```
-
-2. Follow the naming convention:
-    - Use kebab-case for filenames
-    - Always use .mdc extension
-    - Make names descriptive of the rule's purpose
-
-3. Directory structure:
-    ```
-    PROJECT_ROOT/
-    ├── .cursor/
-    │   └── rules/
-    │       ├── your-rule-name.mdc
-    │       └── ...
-    └── ...
-    ```
-
-4. Never place rule files:
-    - In the project root
-    - In subdirectories outside .cursor/rules
-    - In any other location
-
-5. Cursor rules have the following structure:
-
-````
----
-description: Short description of the rule's purpose
-globs: optional/path/pattern/**/* 
-alwaysApply: false
----
-# Rule Title
-
-Main content explaining the rule with markdown formatting.
-
-1. Step-by-step instructions
-2. Code examples
-3. Guidelines
-
-Example:
-```typescript
-// Good example
-function goodExample() {
-  // Implementation following guidelines
-}
-
-// Bad example
-function badExample() {
-  // Implementation not following guidelines
-}
-```
-````