create-sitecore-jss 22.3.0-canary.1 → 22.3.0-canary.11

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

@@ -12,10 +12,3 @@ 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=

package/dist/templates/angular-xmcloud/README.md

@@ -0,0 +1,55 @@
+# Angular for XMCloud
+
+> Sitecore JSS Angular App for XM Cloud. For the current release this feature is experimental.
+
+[Documentation](<TODO>)
+
+This Single Page Application (SPA) built with Angular is designed to be fully compatible with XM Cloud, incorporating several key add-ons and features to streamline the development process and enable seamless integration. The supported key features are as follows:
+
+- `Context ID`: The Context ID environment variable simplifies setting up and configuring XM Cloud solutions. It's a unified identifier that maps to all your configured resources, such as content, sites, files, forms, and integration settings.
+
+- `Pages new editing integration via HTTP render engine endpoint`: Before JSS 22.1, JSS Next.js apps integrated with Sitecore editors through chromes, where data was sent via a POST request. With the 22.1 release, a new metadata method was introduced, rendering the app inside an iframe in XM Cloud Pages, offering benefits like faster load times, simpler configuration, and direct local host connections without tunneling.
+
+- `XM Cloud proxy personalization` with embedded personalization and A/B Component Test support.
+
+- `Forms support`: provides the capability to consume and post Sitecore Forms from JSS apps. Sitecore Forms is a form-authoring framework that enables marketers to author their own forms, collect data, and analyze form performance.
+
+This SPA is tailored to enhance development workflows and enable full utilization of XM Cloud’s capabilities, providing a seamless and efficient foundation for developers.
+
+## Components and Supporting Applications
+
+The following components and supporting applications have been added to the Angular base app to ensure compatibility with XM Cloud:
+
+- `XM Cloud Angular`: Adds support for the Sitecore Context data, which simplifies connecting the application to XM Cloud and configuring the integration of multiple composable Sitecore products. Angular app provides components and can be used during development. Once the app is built and its build artifacts are copied into the proxy, the proxy app can be used to connect to an XMCloud instance and render its content (including personalization etc).
+
+- `XM Cloud Proxy`: Adds integration with XMCloud for the JSS SPA applications and enables editing, personalization and A/B component testing support.
+
+## Environment Variables
+
+The following environment variables can be set to configure the angular app. You can use the `.env` file located in the root of the app or set these directly in the environment (for example, in containers).
+
+| Parameter                              | Description                                                                                                                                |
+| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `PROXY_HOST`                        | Your XM Cloud Proxy hostname is needed to build the app and execute the client-side requests against the proxy server. Default value `http://localhost:3000`                                                                                                                  |
+| `PROXY_BUILD_PATH`                              | Your XM Cloud Proxy server path is needed to build the app. The build output will be copied to the XMCloud Proxy application path. Default value `<xmcloud_proxy_path>\dist`.
+| `SITECORE_EDGE_CONTEXT_ID`                              | The Context ID, which covers many system configurations, required for connecting to the XM Cloud back end. This is an XM Cloud system environment variable. When the application runs on the XM Cloud rendering host, this value is always set to the preview Context ID.                   |
+| `SITECORE_API_KEY`                              | The API key for GRAPH_QL_ENDPOINT authentication. For Experience Edge, you can find the API key in the Sites dashboard by opening the actions menu for a site and navigating to Settings > Developer settings. Copy the value for SITECORE_API_KEY. For a preview endpoint (a CM instance either on XM Cloud or locally), use your preview API Key from the CM instance.
+| `SITECORE_API_HOST`                              | The API hostname, needed to build the application. This should be used in combination with SITECORE_API_KEY for local development or local container setup. For example, https://<xmc_cm_host>.sitecorecloud.io.                   |
+| `GRAPH_QL_ENDPOINT`                              | Your GraphQL Edge endpoint. This is typically optional. By default, the endpoint is calculated using the resolved Sitecore API hostname + the `graphQLEndpointPath` defined in your `package.json`. For a preview endpoint (a CM instance on XM Cloud or a local one), the value is <xmc_cm_host>/sitecore/api/graph/edge.  |
+| `SITECORE_SITE_NAME`                              | The name of your site. This variable overrides the config.appName defined in the package.json file. You can find this value in the Sites dashboard by opening the actions menu for a site and navigating to Settings > Developer settings. Default value `<appName>`,
+`                  |
+| `DEFAULT_LANGUAGE`                              | The default language of your app. Default value `en`                  |
+| `DEBUG`                  | Optional. Debug level for the proxy. Set the DEBUG environment variable to 'sitecore-jss:*,proxy*,http-proxy-middleware*' to see all logs. Refer to the [official docs](https://doc.sitecore.com/xp/en/developers/hd/latest/sitecore-headless-development/debug-logging-in-jss-apps.html#namespaces) for all the available namespaces.
+
+## Build & run
+
+Build your Angular SPA app bundle with `jss build` or `npm run build`. The build output should be placed in the `dist` folder and will automatically get copied to the proxy app. 
+
+To run your app in production mode. Go to the proxy app:
+
+1. Run `npm install`
+
+2. Run `npm run start`
+
+You should be able to see the following message:
+`server listening on port 3000!`.

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.1",
+    "@sitecore-cloudsdk/events": "^0.4.1",
     "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/package.json

@@ -1,8 +1,8 @@
 {
   "dependencies": {
-    "@sitecore/components": "~2.0.0",
-    "@sitecore-cloudsdk/core": "^0.4.0",
-    "@sitecore-cloudsdk/events": "^0.4.0",
-    "@sitecore-feaas/clientside": "^0.5.17"
+    "@sitecore/components": "~2.0.1",
+    "@sitecore-cloudsdk/core": "^0.4.1",
+    "@sitecore-cloudsdk/events": "^0.4.1",
+    "@sitecore-feaas/clientside": "^0.5.19"
   }
 }

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/README.md

@@ -2,35 +2,129 @@
 
 > Sitecore JSS Proxy for XM Cloud is considered experimental.
 
-[Documentation](<TODO>)
+[Documentation](TODO)
+
+This proxy will serve as the backbone for supporting various SPA frameworks by handling server-side rendering (SSR), data queries, and middleware functionalities.
 
 This is a sample setup showing one of how you can configure XM Cloud rendering server.
 
-## Pre-requisites
+## Features Supported
 
-1. SPA sample supports XM Cloud out of the box.
+- `Context ID`: The Context ID environment variable simplifies setting up and configuring XM Cloud solutions. It's a unified identifier that maps to all your configured resources, such as content, sites, files, forms, and integration settings.
+
+- `Pages new editing integration via HTTP render engine endpoint`: Before JSS 22.1, JSS Next.js apps integrated with Sitecore editors through chromes, where data was sent via a POST request. With the 22.1 release, a new metadata method was introduced, rendering the app inside an iframe in XM Cloud Pages, offering benefits like faster load times, simpler configuration, and direct local host connections without tunneling.
+
+- `XM Cloud proxy personalization` with embedded personalization and A/B Component Test support.
+
+- `Forms support`: provides the capability to consume and post Sitecore Forms from JSS apps. Sitecore Forms is a form-authoring framework that enables marketers to author their own forms, collect data, and analyze form performance.
+
+## Configuration Setup
+
+The config.ts file in this proxy app handles essential configurations for server-side rendering, data queries, and middleware functionalities. Here are the main configurations defined:
+
+- Server Bundle Configuration:
+
+  - The app loads a server.bundle.js file, pre-built from your SPA app, for SSR support.
+  - This file contains the configuration and factory functions essential for rendering and data querying.
+
+- GraphQL Endpoint Setup:
 
-1. Build your SPA app bundle with `jss build`. The build output should be placed in the `dist` folder.
+  - Defines a graphQLEndpoint for handling Sitecore GraphQL requests. It differentiates between production (Sitecore Edge) and development (Sitecore CM) endpoints.
+  - Constructs the target URL and path for proxy requests, ensuring compliance with http-proxy-middleware requirements.
 
-## Setup
+- Port Configuration:
 
-Open `config.js` and specify your application settings.
+  - Configures the port for running the proxy, with a default of 3000 or an environment-specified port.
+
+- Personalization Configuration (personalizeConfig):
+
+  - Sets up Sitecore personalization through PersonalizeConfig, defining settings for both Sitecore Experience Edge and CDP endpoints.
+  - Contains options to control personalization features, including:
+    - Timeouts for Edge and CDP endpoints (default 400ms, configurable via environment variables).
+    - Scope and site name used for Sitecore Personalize.
+    - Enable/Disable Switch: Functions that allow you to conditionally disable personalization based on the environment (e.g., disabled in development mode) and cookie consent policy.
+    - Language Configuration: defaultLanguage serves as a fallback if language data is unavailable in layout data.
+
+This configuration is designed to be flexible and secure, with dynamic settings managed via environment variables where appropriate.
 
 ### Environment Variables
 
 The following environment variables can be set to configure the Proxy sample instead of modifying `config.js`. You can use the `.env` file located in the root of the app or set these directly in the environment (for example, in containers).
 
-| Parameter                              | Description                                                                                                                                |
-| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `PROXY_BUNDLE_PATH`                        | Path to the JSS SPA app's `server.bundle.js`. Default can be seen in [config.js](./config.js) file.                                                                                                                    |
-| `PROXY_PORT`                              | Optional. Port which will be used when start sample. Default can be seen in [config.js](./config.js) file.                                                             |
-| `DEBUG`                  | Optional. Debug level for the proxy. Set the DEBUG environment variable to 'sitecore-jss:*,proxy*,http-proxy-middleware*' to see all logs.                                                                                                                  |
+| Parameter           | Description                                                                                                                                                                                  |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `PROXY_BUNDLE_PATH` | Path to the JSS SPA app's `server.bundle.js`. Default can be seen in [config.js](./config.js) file.                                                                                          |
+| `PROXY_PORT`        | Optional. Port which will be used when start sample. Default can be seen in [config.js](./config.js) file.                                                                                   |
+| `DEBUG`             | Optional. Debug level for the proxy. Set the DEBUG environment variable to 'sitecore-jss:_,proxy_,http-proxy-middleware\*, 'sitecore-jss:layout','sitecore-jss:personalize' to see all logs. |
+
+## Pre-requisites
+
+1. SPA sample supports XM Cloud out of the box.
+
+2. Build your SPA app bundle with `jss build` or `npm run build`. The build output should be placed in the `dist` folder. |
 
 ## Build & run
 
 1. Run `npm install`
 
-1. Run `npm run start`
+2. Run `npm run start`
 
 You should be able to see the following message:
 `server listening on port 3000!`.
+
+## Deploy to Netlify
+
+`NOTE: If you are using the Angular starter from the XM-Cloud Foundation repository within a monorepo, please skip to Step 3.`
+
+1. Run `npm init` in the root directory and add the following scripts to package.json:
+   ```
+      "build": "cd ./<your-proxy-app-name> && npm run build-all && cd ..",
+      "install": "cd ./<your-proxy-app-name> && npm install && npm run install-all && cd ..",
+   ```
+2. Ensure that `<your-proxy-app-name>/package.json` includes the following commands to handle the build and install steps properly::
+   ```
+      "build-all": "cd ../angular && npm run build && cd ../<your-proxy-app-name> && tsc",
+      "install-all": "cd ../angular && npm i && cd ../<your-proxy-app-name>"
+   ```
+3. Add `serverless-http` to the list of dependencies in `<your-proxy-app-name>/package.json` and then add the following variable to your ``<your-proxy-app-name>/src/index.ts` file.
+    ```
+      export const handler = serverless(server);
+    ```
+4. Create a `netlfiy.toml` file if not already created and ensure that the following Netlify configuration is added there:
+   - Following functions lets the proxy app to treated as netlify functions. [Functions Overview](https://docs.netlify.com/functions/overview/)
+     ```
+        [functions]
+        directory = "<your-proxy-app-name>/src"
+        node_bundler = "esbuild"
+        included_files = ["<your-proxy-app-name>/dist/**"]
+     ```
+   - To ensure that static assets are accessed properly we may need to add redirects statement for them to the toml file:
+     ```
+        [[redirects]]
+        from = "/dist/browser/*"
+        status = 200
+        to = "/browser/:splat"
+     ```
+   - To ensure that static files under /dist are not accessible via browser add `force=true` to the above
+     ```
+       [[redirects]]
+       from = "/*"
+       status = 200
+       to = "/.netlify/functions/index/:splat"
+       force = true
+     ```
+   - Build command
+     ```
+     [build]
+     command = "npm run build"
+     publish = "<your-proxy-app-name>/dist"
+     ```
+5. Create your netlify deployment: [A Step-by-Step Guide: Deploying on Netlify | Netlify](https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/)
+   a. Set up all your necessary environment variables like SITECORE_EDGE_CONTEXT_ID, SITECORE_SITE_NAME etc.
+   b. Set up your build settings in Site configuration --> Build and Deploy tab.
+      sample configuration:
+        Base Directory: /
+        Build command: npm run build
+        Publish directory: /proxy/dist
+        Functions directory: /proxy/src
+   NOTE: If proxy/dist folder is not picked up properly by Netlify make sure that the `PROXY_BUILD_PATH` env variable is unix style path e.g. `../proxy/dist`

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/dist/templates/vue/package.json

@@ -46,17 +46,16 @@
     "@apollo/client": "^3.7.4",
     "@panter/vue-i18next": "~0.15.2",
     "@sitecore-jss/sitecore-jss-vue": "~22.3.0-canary",
-    "@vue/apollo-composable": "4.0.0-beta.2",
-    "@vue/apollo-option": "^4.0.0-alpha.20",
-    "@vue/apollo-ssr": "^4.0.0-alpha.18",
-    "@vue/server-renderer": "^3.2.45",
+    "@vue/apollo-composable": "4.2.1",
+    "@vue/apollo-option": "^4.0.0",
+    "@vue/apollo-ssr": "^4.0.0",
     "axios": "^1.2.3",
     "bootstrap": "^5.2.3",
     "cross-fetch": "~3.1.5",
     "graphql": "^16.6.0",
     "register-service-worker": "~1.7.2",
     "serialize-javascript": "^6.0.1",
-    "vue": "^3.2.45",
+    "vue": "^3.5.12",
     "vue-i18n": "9.1.10",
     "vue-meta": "3.0.0-alpha.10",
     "vue-router": "4.0.16"
@@ -69,7 +68,6 @@
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-service": "~5.0.8",
-    "@vue/compiler-sfc": "^3.2.45",
     "@vue/eslint-config-prettier": "~7.0.0",
     "chalk": "~4.1.2",
     "chokidar": "~3.5.3",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.3.0-canary.1",
+  "version": "22.3.0-canary.11",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -63,5 +63,5 @@
     "ts-node": "^10.9.1",
     "typescript": "~4.9.5"
   },
-  "gitHead": "204eb3427f26d4ba8c08f44cf9c772f19f2820a8"
+  "gitHead": "0c8193ab38c6cd4e7aafb151741b1401f8427b71"
 }