create-sitecore-jss 22.3.0-canary.2 → 22.3.0-canary.4

package/dist/templates/angular-xmcloud/package.json

@@ -8,8 +8,8 @@
     "prepare:proxy-build": "ts-node --project src/tsconfig.webpack-server.json ./scripts/proxy-build.ts"
   },
   "dependencies": {
-    "@sitecore-cloudsdk/core": "^0.4.0-rc.0",
-    "@sitecore-cloudsdk/events": "^0.4.0-rc.0",
+    "@sitecore-cloudsdk/core": "^0.4.0",
+    "@sitecore-cloudsdk/events": "^0.4.0",
     "font-awesome": "^4.7.0",
     "sass": "^1.52.3",
     "sass-alias": "^1.0.5"

package/dist/templates/angular-xmcloud/server.exports.ts

@@ -5,12 +5,12 @@ import { layoutServiceFactory } from './src/app/lib/layout-service-factory';
 import { environment } from './src/environments/environment';
 import { components } from './src/app/components/app-components.module';
 import metadata from './src/environments/metadata.json';
-
 /**
  * Define the required configuration values to be exported from the server.bundle.ts.
  */
 
 const defaultLanguage = environment.defaultLanguage;
+const sitecoreSiteName = environment.sitecoreSiteName;
 const getClientFactoryConfig = getGraphQLClientFactoryConfig;
 
 export {
@@ -19,6 +19,7 @@ export {
   dictionaryServiceFactory,
   layoutServiceFactory,
   defaultLanguage,
+  sitecoreSiteName,
   components,
   metadata,
 };

package/dist/templates/angular-xmcloud/src/app/lib/graphql-client-factory/config.ts

@@ -28,10 +28,9 @@ export const getGraphQLClientFactoryConfig = () => {
           : getEdgeProxyContentUrl(env.sitecoreEdgeContextId, env.proxyHost),
       };
     } else if (env.graphQLEndpoint && env.sitecoreApiKey) {
-      const graphQLEndpointPath = new URL(env.graphQLEndpoint).pathname;
-
+      // we ignore ssr-proxy and query CM directly in case apiKey is used (i.e. in dev docker deployments)
       clientConfig = {
-        endpoint: isServer ? env.graphQLEndpoint : `${env.proxyHost}${graphQLEndpointPath}`,
+        endpoint: env.graphQLEndpoint,
         apiKey: env.sitecoreApiKey,
       };
     }

package/dist/templates/nextjs-xmcloud/src/lib/middleware/plugins/personalize.ts

@@ -21,7 +21,6 @@ class PersonalizePlugin implements MiddlewarePlugin {
   order = 1;
 
   constructor() {
-
     this.personalizeMiddleware = new PersonalizeMiddleware({
       // Configuration for your Sitecore Experience Edge endpoint
       edgeConfig: {

package/dist/templates/node-xmcloud-proxy/.env

@@ -12,3 +12,14 @@ 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=
+
+# Timeout (ms) for Sitecore Experience Edge requests to respond within. Default is 400.
+PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT=

package/dist/templates/node-xmcloud-proxy/src/config.ts

@@ -1,5 +1,5 @@
 import { Config, ServerBundle } from './types';
-
+import { PersonalizeConfig } from '@sitecore-jss/sitecore-jss-proxy';
 /**
  * The server.bundle.js file from your pre-built SPA app.
  */
@@ -13,6 +13,39 @@ try {
   throw new Error(`ERROR: The server.bundle.js error. ${error}`);
 }
 
+const clientFactoryConfig = serverBundle.getClientFactoryConfig();
+
+/**
+ * GraphQL endpoint resolution to meet the requirements of the http-proxy-middleware
+ */
+export const graphQLEndpoint = (() => {
+  try {
+    const graphQLEndpoint = new URL(clientFactoryConfig.endpoint);
+    // GraphQL endpoint URL (Edge endpoint for production and GraphQL Sitecore CM endpoint for dev)
+    const graphQLEndpointUrl = `${graphQLEndpoint.protocol}//${graphQLEndpoint.hostname}`;
+    // Sitecore Edge Context ID - will only be present for production
+    const sitecoreEdgeContextId = graphQLEndpoint.searchParams.get('sitecoreContextId');
+    // Browser request path to the proxy. Includes only the pathname.
+    const pathname = graphQLEndpoint.pathname;
+    // Target URL for the proxy. Can't include the query string.
+    const target = `${graphQLEndpointUrl}${pathname}`;
+
+    return {
+      target,
+      path: pathname,
+      graphQLEndpointUrl,
+      sitecoreEdgeContextId,
+    };
+  } catch (error) {
+    throw new Error(
+      `ERROR: The serverBundle should export a getClientFactoryConfig function with valid GraphQL endpoint URL returned, current value is ${clientFactoryConfig.endpoint}. ` +
+        'Please check your server bundle.'
+    );
+  }
+})();
+
+const { clientFactory } = serverBundle;
+
 export const config: Config = {
   /**
    * The require'd server.bundle.js file from your pre-built SPA app.
@@ -23,3 +56,36 @@ export const config: Config = {
    */
   port: process.env.PROXY_PORT || 3000,
 };
+
+export const personalizeConfig: PersonalizeConfig = {
+  // Configuration for your Sitecore Experience Edge endpoint
+  edgeConfig: {
+    clientFactory,
+    timeout:
+      (process.env.PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT &&
+        parseInt(process.env.PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT)) ||
+      400,
+  },
+  // Configuration for your Sitecore CDP endpoint
+  // Edge URL and ID can be taken from proxy env, or the base SPA app
+  cdpConfig: {
+    sitecoreEdgeUrl: graphQLEndpoint.graphQLEndpointUrl,
+    sitecoreEdgeContextId: graphQLEndpoint.sitecoreEdgeContextId || '',
+    timeout:
+      (process.env.PERSONALIZE_MIDDLEWARE_CDP_TIMEOUT &&
+        parseInt(process.env.PERSONALIZE_MIDDLEWARE_CDP_TIMEOUT)) ||
+      400,
+  },
+  // Optional Sitecore Personalize scope identifier.
+  scope: process.env.PERSONALIZE_SCOPE,
+  // 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.
+  // Personalization will also be disabled when edge context id is missing
+  disabled: () => process.env.NODE_ENV === 'development' || !graphQLEndpoint.sitecoreEdgeContextId,
+  // This function determines if a route should be excluded from personalization.
+  excludeRoute: () => false,
+  sitecoreSiteName: serverBundle.sitecoreSiteName || '',
+  // defaultLanguage will be used as fallback for personalization, if language cannot be read from layout service data
+  defaultLanguage: serverBundle.defaultLanguage,
+};

package/dist/templates/node-xmcloud-proxy/src/index.ts

@@ -1,11 +1,11 @@
 import 'dotenv/config';
 import express, { Response } from 'express';
 import compression from 'compression';
-import { createProxyMiddleware } from 'http-proxy-middleware';
+import { createProxyMiddleware, fixRequestBody } from 'http-proxy-middleware';
 import { debug } from '@sitecore-jss/sitecore-jss';
-import { editingRouter } from '@sitecore-jss/sitecore-jss-proxy';
-import { healthCheck } from '@sitecore-jss/sitecore-jss-proxy';
-import { config } from './config';
+import { editingRouter, healthCheck } from '@sitecore-jss/sitecore-jss-proxy';
+import { config, graphQLEndpoint } from './config';
+import { personalizeHelper, personalizePlugin } from './personalize';
 
 const server = express();
 
@@ -45,31 +45,6 @@ const layoutService = layoutServiceFactory.create();
 
 const dictionaryService = dictionaryServiceFactory.create();
 
-const clientFactoryConfig = config.serverBundle.getClientFactoryConfig();
-
-/**
- * GraphQL endpoint resolution to meet the requirements of the http-proxy-middleware
- */
-const graphQLEndpoint = (() => {
-  try {
-    const graphQLEndpoint = new URL(clientFactoryConfig.endpoint);
-    // Browser request path to the proxy. Includes only the pathname.
-    const pathname = graphQLEndpoint.pathname;
-    // Target URL for the proxy. Can't include the query string.
-    const target = `${graphQLEndpoint.protocol}//${graphQLEndpoint.hostname}${pathname}`;
-
-    return {
-      target,
-      path: pathname,
-    };
-  } catch (error) {
-    throw new Error(
-      `ERROR: The serverBundle should export a getClientFactoryConfig function with valid GraphQL endpoint URL returned, current value is ${clientFactoryConfig.endpoint}. ` +
-        'Please check your server bundle.'
-    );
-  }
-})();
-
 /**
  * Parse requested url in order to detect current route and language
  * @param {string} reqRoute requested route
@@ -105,6 +80,8 @@ const handleError = (res: Response, err: unknown) => {
 
 // enable gzip compression for appropriate file types
 server.use(compression());
+// enable access to req.body
+server.use(graphQLEndpoint.path, express.json());
 
 // turn off x-powered-by http header
 server.settings['x-powered-by'] = false;
@@ -125,6 +102,12 @@ server.use(
   createProxyMiddleware({
     target: graphQLEndpoint.target,
     changeOrigin: true,
+    selfHandleResponse: true,
+    on: {
+      proxyReq: fixRequestBody,
+    },
+    // for client-side routing, personalization is performed by modifying layout service response
+    plugins: [personalizePlugin],
   })
 );
 
@@ -165,11 +148,17 @@ server.use(async (req, res) => {
     }
 
     // Language is required. In case it's not specified in the requested URL, fallback to the default language from the app configuration.
-    const layoutData = await layoutService.fetchLayoutData(
+    let layoutData = await layoutService.fetchLayoutData(
       route,
       lang || config.serverBundle.defaultLanguage
     );
-
+    // for SSR loading routing, personalization is performed by modifying layoutData directly
+    const personalizedLayoutData = await personalizeHelper.personalizeLayoutData(
+      req,
+      res,
+      layoutData
+    );
+    layoutData = personalizedLayoutData;
     const viewBag = { dictionary: {} };
 
     viewBag.dictionary = await dictionaryService.fetchDictionaryData(

package/dist/templates/node-xmcloud-proxy/src/personalize.ts

@@ -0,0 +1,34 @@
+import { GRAPHQL_LAYOUT_QUERY_NAME, PersonalizeHelper } from '@sitecore-jss/sitecore-jss-proxy';
+import { personalizeConfig } from './config';
+import { responseInterceptor } from 'http-proxy-middleware';
+import { Plugin } from 'http-proxy-middleware/dist/types';
+import { IncomingMessageWithBody } from './types';
+
+export const personalizeHelper = new PersonalizeHelper(personalizeConfig);
+
+// personalize plugin to modify intercepted Layout Service request data
+export const personalizePlugin: Plugin = (proxyServer) => {
+  proxyServer.on(
+    'proxyRes',
+    responseInterceptor(async (responseBuffer, _, req, res) => {
+      let responseText = responseBuffer.toString('utf8');
+      const payload = JSON.stringify((req as IncomingMessageWithBody).body);
+
+      // only apply personalization onto JSS layout service results
+      if (payload.includes(GRAPHQL_LAYOUT_QUERY_NAME)) {
+        let layoutDataRaw = JSON.parse(responseText);
+        if (!layoutDataRaw?.data?.layout?.item?.rendered?.sitecore) {
+          return responseText;
+        }
+        const personalizedLayout = await personalizeHelper.personalizeLayoutData(
+          req as IncomingMessageWithBody,
+          res,
+          layoutDataRaw?.data?.layout?.item?.rendered
+        );
+        layoutDataRaw.data.layout.item.rendered = personalizedLayout;
+        responseText = JSON.stringify(layoutDataRaw);
+      }
+      return responseText;
+    })
+  );
+};

package/dist/templates/node-xmcloud-proxy/src/types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import {
   GraphQLRequestClientFactory,
   GraphQLRequestClientFactoryConfig,
@@ -6,6 +7,7 @@ import { DictionaryService } from '@sitecore-jss/sitecore-jss/i18n';
 import { Metadata } from '@sitecore-jss/sitecore-jss/utils';
 import { LayoutService } from '@sitecore-jss/sitecore-jss/layout';
 import { AppRenderer, RouteUrlParser } from '@sitecore-jss/sitecore-jss-proxy';
+import { IncomingMessage } from 'http';
 
 export interface ServerBundle {
   [key: string]: unknown;
@@ -14,6 +16,7 @@ export interface ServerBundle {
   clientFactory: GraphQLRequestClientFactory;
   getClientFactoryConfig: () => GraphQLRequestClientFactoryConfig;
   defaultLanguage: string;
+  sitecoreSiteName: string;
   layoutServiceFactory: { create: () => LayoutService };
   dictionaryServiceFactory: { create: () => DictionaryService };
   components: string[] | Map<string, unknown>;
@@ -25,3 +28,10 @@ export interface Config {
   port: string | number;
   serverBundle: ServerBundle;
 }
+
+/**
+ * IncomingMessage type modified with exporess.json() call to include request body
+ */
+export type IncomingMessageWithBody = IncomingMessage & {
+  body: ReadableStream<Uint8Array> | null;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.3.0-canary.2",
+  "version": "22.3.0-canary.4",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -63,5 +63,5 @@
     "ts-node": "^10.9.1",
     "typescript": "~4.9.5"
   },
-  "gitHead": "0065e93738024c2357c0e9b3fd1b1613f3bc3153"
+  "gitHead": "41544c7c448dc62a8327fe3d3fe3937b61252226"
 }