Multi-site implementation - dynamic config approach

packages/pwa-kit-create-app/assets/pwa/default.js

@@ -4,11 +4,27 @@
  * 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
  */
-exports.template = ({commerceApi, einsteinApi}) => `module.exports = {
+exports.template = ({commerceApi, einsteinApi}) => `const sites = require('./sites.js')
+module.exports = {
     app: {
+        // Customize how your 'site' and 'locale' are displayed in the url.
         url: {
-            locale: 'none'
+            // Determine where the siteRef is located. Valid values include 'path|query_param|none'. Defaults to: 'none'
+            // site: 'none',
+            // Determine where the localeRef is located. Valid values include 'path|query_param|none'. Defaults to: 'none'
+            locale: 'none',
+            // This boolean value dictates whether or not default site or locale values are shown in the url. Defaults to: false
+            // showDefaults: true
         },
+        // The default site for your app. This value will be used when a siteRef could not be determined from the url
+        defaultSite: 'RefArch',
+        // Provide aliases for your sites. These will be used in place of your site id when generating paths throughout the application.
+        // siteAliases: {
+        //     RefArch: 'us'
+        // },
+        // The sites for your app, which is imported from sites.js
+        sites,
+        // Commerce api config
         commerceAPI: {
             proxyPath: \`/mobify/proxy/${commerceApi.proxyPath}\`,
             parameters: {
@@ -18,23 +34,32 @@ exports.template = ({commerceApi, einsteinApi}) => `module.exports = {
                 siteId: '${commerceApi.siteId}'
             }
         },
+        // Einstein api config
         einsteinAPI: {
             proxyPath: \`/mobify/proxy/${einsteinApi.proxyPath}\`,
             einsteinId: '${einsteinApi.einsteinId}',
             siteId: '${einsteinApi.siteId}'
         }
     },
+    // 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
     pageNotFoundURL: '/page-not-found',
+    // Enables or disables building the files necessary for server-side rendering.
     ssrEnabled: true,
+    // This list determines which files are available exclusively to the server-side rendering system 
+    // and are not available through the /mobify/bundle/ path.
     ssrOnly: ['ssr.js', 'ssr.js.map', 'node_modules/**/*.*'],
+    // This list determines which files are available to the server-side rendering system 
+    // and available through the /mobify/bundle/ path.
     ssrShared: [
         'static/ico/favicon.ico',
         'static/robots.txt',
         '**/*.js',
         '**/*.js.map',
         '**/*.json'
     ],
+    // Additional parameters that configure Express app behavior.
     ssrParameters: {
         ssrFunctionNodeVersion: '14.x',
         proxyConfigs: [

packages/pwa-kit-create-app/assets/pwa/sites.js

@@ -0,0 +1,25 @@
+/*
+ * 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
+ */
+exports.template = () => `// Provide the sites for your app. Each site includes site id, and its localization configuration.
+// You can also provide aliases for your locale. They will be used in place of your locale id when generating paths across the app
+module.exports = [
+    {
+        id: 'RefArch',
+        l10n: {
+            supportedCurrencies: ['USD'],
+            defaultCurrency: 'USD',
+            defaultLocale: 'en-US',
+            supportedLocales: [
+                {
+                    id: 'en-US',
+                    // alias: 'us',
+                    preferredCurrency: 'USD'
+                }
+            ]
+        }
+    }
+]`

packages/pwa-kit-create-app/scripts/create-mobify-app.js

@@ -132,28 +132,26 @@ const runGenerator = (answers, {outputDir}) => {
 
     extractTemplate('pwa', outputDir)
 
-    const {pkgLocalizationConfig} = require(`../assets/pwa/l10n.config`)
     const pkgJsonPath = p.resolve(outputDir, 'package.json')
     const pkgJSON = readJson(pkgJsonPath)
     const pkgDataWithAnswers = merge(pkgJSON, answers['scaffold-pwa'])
-    const finalPkgData = merge(pkgDataWithAnswers, pkgLocalizationConfig)
 
     npmInstallables.forEach((pkgName) => {
         const keys = ['dependencies', 'devDependencies']
         keys.forEach((key) => {
-            const deps = finalPkgData[key]
+            const deps = pkgDataWithAnswers[key]
             if (deps && deps[pkgName]) {
                 deps[pkgName] = SDK_VERSION
             }
         })
     })
 
-    writeJson(pkgJsonPath, finalPkgData)
+    writeJson(pkgJsonPath, pkgDataWithAnswers)
 
     const manifest = p.resolve(outputDir, 'app', 'static', 'manifest.json')
     replaceJSON(manifest, {
-        name: finalPkgData.siteName,
-        short_name: finalPkgData.siteName,
+        name: pkgDataWithAnswers.siteName,
+        short_name: pkgDataWithAnswers.siteName,
         start_url: '/?homescreen=1',
         icons: [
             {
@@ -167,7 +165,8 @@ const runGenerator = (answers, {outputDir}) => {
         ]
     })
 
-    const PWAKitConfigJsonTemplate = require(`../assets/pwa/default`).template
+    const PWAKitConfigTemplate = require(`../assets/pwa/default`).template
+    const PWAKitSitesTemplate = require(`../assets/pwa/sites`).template
 
     const commerceApi = {
         proxyPath: answers['scaffold-pwa'].mobify.ssrParameters.proxyConfigs[0].path,
@@ -182,10 +181,12 @@ const runGenerator = (answers, {outputDir}) => {
         siteId: answers['einstein-api'].siteId || answers['commerce-api'].siteId
     }
 
-    new sh.ShellString(PWAKitConfigJsonTemplate({commerceApi, einsteinApi})).to(
+    new sh.ShellString(PWAKitConfigTemplate({commerceApi, einsteinApi})).to(
         p.resolve(outputDir, 'config', 'default.js')
     )
 
+    new sh.ShellString(PWAKitSitesTemplate()).to(p.resolve(outputDir, 'config', 'sites.js'))
+
     npmInstall(outputDir)
 }