[angular-xmcloud][xmcloud-proxy] Move PERSONALIZE_SCOPE to angular SPA (#1973)

* [angular-xmcloud][xmcloud-proxy] Move PERSONALIZE_SCOPE to angular SPA

* changelog

Author: art-alexeyenko

CHANGELOG.md

@@ -40,7 +40,7 @@ Our versioning strategy is as follows:
   * `proxyAppDestination` arg can be passed into `create-sitecore-jss` command to define path for proxy to be installed in
 * `[templates/angular]` `[templates/angular-xmcloud]` `[template/node-xmcloud-proxy]` `[sitecore-jss-proxy]` Introduced /api/editing/config endpoint ([#1903](https://github.com/Sitecore/jss/pull/1903))
 * `[templates/angular]` `[templates/angular-xmcloud]` `[template/node-xmcloud-proxy]` `[sitecore-jss-proxy]` Introduced /api/editing/render endpoint ([#1908](https://github.com/Sitecore/jss/pull/1908))
-* `[templates/angular-xmcloud]` `[template/node-xmcloud-proxy]` Personalization support ([#1964](https://github.com/Sitecore/jss/pull/1964)[#1971](https://github.com/Sitecore/jss/pull/1971))
+* `[templates/angular-xmcloud]` `[template/node-xmcloud-proxy]` Personalization support ([#1964](https://github.com/Sitecore/jss/pull/1964)[#1971](https://github.com/Sitecore/jss/pull/1971)[#1973](https://github.com/Sitecore/jss/pull/1973))
 * `[create-sitecore-jss]``[sitecore-jss-angular]``[template/angular-xmcloud]` Angular SXA components
   * Angular placeholder now supports SXA components ([#1870](https://github.com/Sitecore/jss/pull/1870))
   * Component styles ([#1917](https://github.com/Sitecore/jss/pull/1917))

packages/create-sitecore-jss/src/templates/angular-xmcloud/.env

@@ -12,3 +12,10 @@ PROXY_HOST=http://localhost:3000
 
 # Your XM Cloud Proxy server path is needed to build the app. The build output will be copied to the proxy server path.
 PROXY_BUILD_PATH=<%- locals.relativeProxyAppDestination.replace(/\\/g, '\\\\') %>dist
+
+# ==============================================
+
+# An optional Sitecore Personalize scope identifier.
+# This can be used to isolate personalization data when multiple XM Cloud Environments share a Personalize tenant.
+# This should match the PAGES_PERSONALIZE_SCOPE environment variable for your connected XM Cloud Environment.
+PERSONALIZE_SCOPE=

packages/create-sitecore-jss/src/templates/angular-xmcloud/scripts/config/plugins/xmcloud.ts

@@ -18,6 +18,7 @@ class XMCloudPlugin implements ConfigPlugin {
       process.env[`${constantCase('sitecoreEdgeUrl')}`]?.replace(/\/$/, '') ||
       'https://edge-platform.sitecorecloud.io';
     const sitecoreEdgeContextId = process.env[`${constantCase('sitecoreEdgeContextId')}`];
+    const personalizeScope = process.env[`${constantCase('personalizeScope')}`]
 
     if (config.sitecoreApiKey && sitecoreEdgeContextId) {
       console.log(
@@ -32,6 +33,7 @@ class XMCloudPlugin implements ConfigPlugin {
       proxyHost,
       sitecoreEdgeUrl,
       sitecoreEdgeContextId,
+      personalizeScope,
     });
   }
 }

packages/create-sitecore-jss/src/templates/angular-xmcloud/server.exports.ts

@@ -11,6 +11,7 @@ import metadata from './src/environments/metadata.json';
 
 const defaultLanguage = environment.defaultLanguage;
 const sitecoreSiteName = environment.sitecoreSiteName;
+const personalizeScope = environment.personalizeScope;
 const getClientFactoryConfig = getGraphQLClientFactoryConfig;
 
 export {
@@ -20,6 +21,7 @@ export {
   layoutServiceFactory,
   defaultLanguage,
   sitecoreSiteName,
+  personalizeScope,
   components,
   metadata,
 };

packages/create-sitecore-jss/src/templates/node-xmcloud-proxy/.env

@@ -13,11 +13,6 @@ PROXY_BUNDLE_PATH=
 # Set the DEBUG environment variable to 'sitecore-jss:*,sitecore-jss:proxy,http-proxy-middleware*' to see all logs:
 #DEBUG=sitecore-jss:*,http-proxy-middleware*
 
-# An optional Sitecore Personalize scope identifier.
-# This can be used to isolate personalization data when multiple XM Cloud Environments share a Personalize tenant.
-# This should match the PAGES_PERSONALIZE_SCOPE environment variable for your connected XM Cloud Environment.
-PERSONALIZE_SCOPE=
-
 # Timeout (ms) for Sitecore CDP requests to respond within. Default is 400.
 PERSONALIZE_MIDDLEWARE_CDP_TIMEOUT=
 

packages/create-sitecore-jss/src/templates/node-xmcloud-proxy/src/config.ts

@@ -77,7 +77,7 @@ export const personalizeConfig: PersonalizeConfig = {
       400,
   },
   // Optional Sitecore Personalize scope identifier.
-  scope: process.env.PERSONALIZE_SCOPE,
+  scope: serverBundle.personalizeScope,
   // This function determines if the personalization should be turned off.
   // IMPORTANT: You should implement based on your cookie consent management solution of choice.
   // You may wish to keep it disabled while in development mode.

packages/create-sitecore-jss/src/templates/node-xmcloud-proxy/src/types.ts

@@ -17,6 +17,7 @@ export interface ServerBundle {
   getClientFactoryConfig: () => GraphQLRequestClientFactoryConfig;
   defaultLanguage: string;
   sitecoreSiteName: string;
+  personalizeScope?: string;
   layoutServiceFactory: { create: () => LayoutService };
   dictionaryServiceFactory: { create: () => DictionaryService };
   components: string[] | Map<string, unknown>;