@salesforce/pwa-kit-create-app 3.12.0-preview.0 → 3.12.0-preview.2

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

@@ -10,6 +10,16 @@ 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.
@@ -117,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/overrides/app/components/_app-config/index.jsx.hbs

@@ -31,6 +31,7 @@ import {withReactQuery} from '@salesforce/pwa-kit-react-sdk/ssr/universal/compon
 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,
@@ -42,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
@@ -53,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
@@ -94,12 +98,16 @@ const AppConfig = ({children, locals = {}}) => {
             defaultDnt={DEFAULT_DNT_STATE}
             logger={createLogger({packageName: 'commerce-sdk-react'})}
             passwordlessLoginCallbackURI={passwordlessLoginCallbackURI}
-            {{#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}}
-            slasPrivateClientProxyEndpoint={slasPrivateClientProxyEndpoint}
+            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,35 +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'
-                    ]
-                },
-                referrerPolicy: {
-                    policy: 'strict-origin-when-cross-origin'
-                }
-            }
+            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

@@ -31,6 +31,7 @@ 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,
@@ -42,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
@@ -53,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
@@ -94,12 +98,16 @@ const AppConfig = ({children, locals = {}}) => {
             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}}
-            slasPrivateClientProxyEndpoint={slasPrivateClientProxyEndpoint}
+            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,34 +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'
-                    ]
-                },
-                referrerPolicy: {
-                    policy: 'strict-origin-when-cross-origin'
-                }
-            }
+            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

@@ -10,6 +10,16 @@ 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/pwa-kit-create-app",
-  "version": "3.12.0-preview.0",
+  "version": "3.12.0-preview.2",
   "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.12.0-preview.0",
-    "internal-lib-build": "3.12.0-preview.0",
+    "@salesforce/pwa-kit-dev": "3.12.0-preview.2",
+    "internal-lib-build": "3.12.0-preview.2",
     "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": "f79699d763ecdf8e0733e2d6c08b71487af8b15c"
+  "gitHead": "c0d7ff4673e54ecb119ca4aff5b919f0064b6539"
 }

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,18 +771,10 @@
             {
                 "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"
-            },
-            {
-                "name": "--initGit",
-                "description": "Initializes a git repository and stages the files in the generated project",
-                "_ai": {
-                    "instruction": "CRITICAL: Before executing ANY project creation command, you MUST check if the '--initGit' flag is provided in the user's request. If NOT provided, STOP and ask: 'Would you like to initialize a Git repository for this project?' Wait for explicit yes/no answer. Only then proceed with project creation. FAILURE TO FOLLOW THIS STEP IS A CRITICAL ERROR. This check must happen AFTER preset/template selection but BEFORE command execution. DO NOT proceed with project creation until this question is answered.",
-                    "expectedUse": "Used to determine if a Git repository should be initialized in the generated project. This flag must be explicitly set by the user or confirmed via a direct question. The agent MUST wait for user confirmation before proceeding."
-                }
             }
         ],
         "examples": [

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)
@@ -329,7 +332,7 @@ const processTemplate = (relFile, inputDir, outputDir, context) => {
  * @param {*} answers
  * @param {*} param2
  */
-const runGenerator = (context, {initGit, outputDir, templateVersion, verbose}) => {
+const runGenerator = (context, {outputDir, templateVersion, verbose}) => {
     const {answers, template} = context
     const {id, source} = template
     const {extend = false} = answers.project
@@ -429,26 +432,6 @@ const runGenerator = (context, {initGit, outputDir, templateVersion, verbose}) =
         // Install dependencies for the newly minted project.
         npmInstall(outputDir, {verbose})
     }
-
-    // Initialize a git repository if the --initGit flag is provided.
-    if (initGit) {
-        initGitRepo(outputDir)
-    }
-}
-
-/**
- * Initializes a git repository in the specified directory, adds all files, and checks for git installation.
- * @param {string} outputDir - The directory in which to initialize the git repository.
- */
-const initGitRepo = (outputDir) => {
-    if (!sh.which('git')) {
-        console.error(
-            'Error: git is not installed or not found in PATH. Please install git to initialize a repository.'
-        )
-        process.exit(1)
-    }
-    sh.exec(`git init`, {cwd: outputDir})
-    sh.exec(`git add .`, {cwd: outputDir})
 }
 
 const foundNode = process.versions.node
@@ -554,7 +537,7 @@ const main = async (opts) => {
     let isPreset = false
     let answers = {}
     let selectedTemplate
-    let {outputDir, verbose, preset, templateVersion, stdio, displayProgram, initGit} = opts
+    let {outputDir, verbose, preset, templateVersion, stdio, displayProgram} = opts
     const {prompt} = inquirer
     const OUTPUT_DIR_FLAG_ACTIVE = !!outputDir
     const presetId = preset || process.env.GENERATOR_PRESET
@@ -683,7 +666,7 @@ const main = async (opts) => {
     }
 
     // Generate the project.
-    runGenerator(context, {initGit, outputDir, templateVersion, verbose})
+    runGenerator(context, {outputDir, templateVersion, verbose})
 
     // Return the folder in which the project was generated in.
     return outputDir