create-content-sdk-app 2.3.0 → 2.3.1

package/dist/templates/angular/README.md

@@ -10,7 +10,6 @@ The functionality available in Content SDK Angular right now includes:
 
 What can you expect coming in the future ahead of the 1.0 release:
  - SXA Redirects support
- - More varied hosting options
  - Ongoing optimizations and bug fixes
 
 ## Deployment
@@ -32,10 +31,126 @@ But, temporarily, we ask you to perform some additional actions post-deploy in y
 
 These variables are needed to ensure SAI backend infrastructure correctly sets up and uses your Angular sample for Pages editing and preview. They will be switched to be set automatically between now and the 1.0 release.
 
-### Deploying to Netlify
+## Non-Sitecore AI deployments
 
-Coming soon
+For both deploying to Netlify and Vercel, ensure your `src/server.ts` file has the default export for the request handler:
+```
+  export default reqHandler;
+```
 
 ### Deploying to Vercel
 
-Coming soon
+Content SDK for Angular sample uses ExpressJS extensively to enhance the base Angular capabilities with Sitecore AI features.
+Since Express is being used, and since Vercel has no Angular SSR support, you need to create a Vercel function file in order for Vercel to correctly serve the application.
+For example, create a `vercel/index.mjs` file and import the Angular's compiled `server.mjs`output:
+```
+  export { default } from '../dist/<your_app_name>/server/server.mjs';
+```
+where `<your_app_name>` is the name of application set in `package.json`.
+
+After that, configure redirect rules for Vercel request to reach your app code, via `vercel.json` file:
+```
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "buildCommand": "npm run build",
+  "outputDirectory": "dist/<your_app_name>/browser",
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/vercel/index"
+    }
+  ],
+  "functions": {
+    "vercel/index.mjs": {
+      "includeFiles": "dist/<your_app_name>/**"
+    }
+  }
+}
+```
+
+3. In Vercel portal, set the required Content SDK environment variables. Additionally, set `NG_ALLOWED_HOSTS` environment variable to allow Vercel URLs:
+```
+  NG_ALLOWED_HOSTS=*.vercel.app`
+```
+
+Deploying your app to Vercel should now result in the site being correctly served.
+
+### Deploying to Netlify
+
+As ExpressJS is being used by Content SDK for Angular, the natural instinct would be to follow the [express guide from Netlify](https://docs.netlify.com/build/frameworks/framework-setup-guides/express/#deploy-your-express-app-with-netlify-cli)
+Unfortunately, this will result in your Netlify functions being compiled as CJS and some built in functionality of Angular (like `import.meta` values) being unavailable.
+In order to build the function with Netlify's latest v2 API and have it compiled as ESM, some hoop jumps are required, using the express deployment guide as basis.
+
+1. `serverless-http` module provides the required bridge between Express and Netlify, so you should install it alongside few additional dependencies that your Netlify function will use:
+```
+  npm i express serverless-http @netlify/functions @types/express
+```
+2. Create a function implementation file that will import Angular's SSR artifacts and transform them to be used by `serverless-http` and v2 functions. These transformations are needed for Netlify CLI to correctly identify the function as ESM-compatible. The below example is for a TypeScript implementaion. We assume this function is located in the `netlify/functions/server.mts` file:
+```
+import serverless from 'serverless-http';
+import type { Context } from '@netlify/functions';
+import { default as app } from '../../dist/<your_app_name>/server/server.mjs';
+
+const handler = serverless(app);
+const FUNCTION_BASE = '/.netlify/functions/server';
+
+/** serverless-http's result for a Lambda Function URL ("2.0") event. */
+interface LambdaResult {
+  statusCode: number;
+  headers: Record<string, string>;
+  cookies: string[];
+  body: string;
+  isBase64Encoded: boolean;
+}
+
+export default async (request: Request, context: Context) => {
+  const url = new URL(request.url);
+  // The netlify.toml rewrite passes the original path; direct invocations
+  // arrive prefixed with the function base path — strip it.
+  const path = url.pathname.startsWith(FUNCTION_BASE)
+    ? url.pathname.slice(FUNCTION_BASE.length) || '/'
+    : url.pathname;
+
+  // Lambda Function URL ("2.0") event — the leanest shape serverless-http accepts
+  const lambdaRequest = {
+      version: '2.0',
+      rawPath: path,
+      rawQueryString: url.searchParams.toString(),
+      headers: Object.fromEntries(request.headers),
+      requestContext: { http: { method: request.method } },
+      body: Buffer.from(await request.arrayBuffer()),
+    };
+  const result = (await handler(lambdaRequest, context)) as LambdaResult;
+
+  // set-cookie comes back separately; `|| null` keeps 204/304 responses body-less.
+  const headers = new Headers(result.headers);
+  for (const cookie of result.cookies) headers.append('set-cookie', cookie);
+  return new Response(
+    result.isBase64Encoded ? Buffer.from(result.body, 'base64') : result.body || null,
+    { status: result.statusCode, headers }
+  );
+};
+```
+where `<your_app_name>` is the name of application set in `package.json`.
+
+3. Finally, create the `netlify.toml` file to correctly configure Netlify in handling request to your function:
+```
+[build]
+  command = "npm run build"
+  publish = "dist/content-sdk-angular/browser"
+
+[functions.server]
+  # Ship the full dist folder so express.static and any runtime file access work.
+  included_files = ["dist/content-sdk-angular/**"]
+
+[[redirects]]
+  from = "/*"
+  status = 200
+  to = "/.netlify/functions/server/:splat"
+
+```
+
+4. In Netlify portal, set the required Content SDK environment variables. Additionally, set `NG_ALLOWED_HOSTS` environment variable to allow netlify URLs:
+```
+  NG_ALLOWED_HOSTS=*.netlify.app`
+```

package/dist/templates/angular/src/app/components/content-block.component.ts

@@ -4,7 +4,7 @@ import { ScTextDirective, ScRichTextDirective, TextField } from '@sitecore-conte
 import { SxaComponent } from './content-sdk/sxa.component';
 
 /**
- * Parity with kit-nextjs-skate-park ContentBlock (minimal section, no Sitecore chrome wrapper).
+ * Minimal content section (no Sitecore chrome wrapper).
  */
 @Component({
   selector: 'app-content-block',

package/dist/templates/angular/src/app/components/content-sdk/json-ld.ts

@@ -1,4 +1,4 @@
-/** Minimal JSON-LD builders aligned with kit-nextjs-skate-park structured data. */
+/** Minimal JSON-LD builders for structured data. */
 
 export type ArticleJsonLd = {
   '@context': 'https://schema.org';

package/dist/templates/angular/src/app/components/content-sdk/utils.ts

@@ -3,7 +3,7 @@ import { computed, type Signal } from '@angular/core';
 type LayoutParams = { RenderingIdentifier?: string; Styles?: string };
 
 /**
- * CSS class/id helpers aligned with kit-nextjs-skate-park component wrappers.
+ * CSS class/id helpers for component wrappers.
  */
 export function computedRenderingId(
   params: () => { [key: string]: string } | undefined,

package/dist/templates/angular/src/app/components/partial-design-dynamic-placeholder.component.ts

@@ -2,7 +2,7 @@ import { Component, computed, input } from '@angular/core';
 import { ComponentRendering, ScPlaceholderComponent } from '@sitecore-content-sdk/angular';
 
 /**
- * Parity with kit-nextjs-skate-park PartialDesignDynamicPlaceholder:
+ * Partial design dynamic placeholder:
  * renders a single placeholder whose name comes from rendering.params.sig.
  */
 @Component({

package/dist/templates/angular/src/app/components/structured-data.component.ts

@@ -1,7 +1,7 @@
 import { Component, ElementRef, Renderer2, effect, inject, input } from '@angular/core';
 
 /**
- * Emits a JSON-LD script tag (kit-nextjs-skate-park StructuredData parity).
+ * Emits a JSON-LD script tag.
  * Uses the DOM API so Angular does not strip script tags from templates.
  */
 @Component({

package/dist/templates/angular/src/app/pages/error.component.ts

@@ -6,7 +6,7 @@ import { LayoutComponent } from '../shared/layout.component';
 
 /**
  * 500 error page. Uses the Sitecore server-error page when the loader returns layout data;
- * otherwise shows a static fallback (aligned with kit-nextjs global-error behavior).
+ * otherwise shows a static fallback.
  */
 @Component({
   selector: 'app-error',

package/dist/templates/angular/src/app/pages/not-found.component.ts

@@ -7,7 +7,7 @@ import { LayoutComponent } from '../shared/layout.component';
 
 /**
  * 404 page. Uses the Sitecore not-found page when the loader returns layout data;
- * otherwise shows a static fallback (aligned with kit-nextjs not-found behavior).
+ * otherwise shows a static fallback.
  */
 @Component({
   selector: 'app-404',

package/dist/templates/angular/src/server.ts

@@ -9,7 +9,7 @@ import express from 'express';
 import { join } from 'node:path';
 import memoryDriver from 'unstorage/drivers/memory';
 import {
-  createCacheAdminMiddleware,
+  createBotTrackingMiddleware,
   createEditingConfigMiddleware,
   createEditingRenderMiddleware,
   createLoaderCache,
@@ -17,6 +17,7 @@ import {
   createRobotsMiddleware,
   createMultisiteMiddleware,
   createPersonalizeMiddleware,
+  createRedirectsMiddleware,
   createSitecoreRevalidateMiddleware,
   createSitemapMiddleware,
 } from '@sitecore-content-sdk/angular';
@@ -76,9 +77,6 @@ app.use(
   })
 );
 
-/** Admin endpoints for cache inspection and invalidation (see `/api/_cache`). */
-app.use(createCacheAdminMiddleware({ cache: loaderCache, endpoint: '/api/_cache' }));
-
 /**
  * Editing config endpoint (`/api/editing/config`). Replies with the registered
  * component map keys and `editMode: 'metadata'` so Sitecore Pages can negotiate
@@ -99,8 +97,8 @@ app.use(
 app.use(createEditingRenderMiddleware());
 
 /**
- * Shared path matcher for the request-scoped middlewares (multisite + personalize, and any
- * future redirects middleware). It decides which requests these middlewares act on.
+ * Shared path matcher for the request-scoped middlewares (multisite, redirects and personalize).
+ * It decides which requests these middlewares act on.
  *
  * Patterns are exact strings or RegExp. The SDK already skips API routes (`/api/*`), Sitecore
  * routes (`/sitecore/*`), static files (any path whose last segment has an extension) and
@@ -129,10 +127,45 @@ app.use(
   })
 );
 
+/*
+ * Bot tracking middleware. Detects bots by User-Agent, sets the `sc_bot` cookie, and sends a
+ * dedicated bot page-view event. Must run before personalize so the bot cookie is set before
+ * personalize decides whether to skip. Does not run in dev/localhost environments.
+ */
+app.use(
+  createBotTrackingMiddleware({
+    ...config.api.edge,
+    locales: config.angular.locales,
+    defaultLanguage: config.defaultLanguage,
+    defaultSite: config.defaultSite,
+    matcher: middlewareMatcher,
+  })
+);
+
+/**
+ * Redirects middleware. Matches each request against the site's Sitecore redirects (locale,
+ * static and regex rules) and issues a 301/302 redirect or an internal server-transfer rewrite.
+ * Runs after multisite (which resolves the site it fetches redirects for) and before personalize
+ * so a redirect short-circuits the request before a CDP call is made.
+ */
+app.use(
+  createRedirectsMiddleware({
+    ...config.redirects,
+    ...config.api.edge,
+    ...(config.api.local ?? {}),
+    ...config.angular,
+    sites,
+    defaultLanguage: config.defaultLanguage,
+    defaultSite: config.defaultSite,
+    matcher: middlewareMatcher,
+  })
+);
+
 /**
  * Personalize middleware. Identifies page/component variants for the request via
  * Sitecore CDP and writes them onto `req.scParams` so the page loader fetches the
- * personalized layout and the loader cache keys per variant.
+ * personalized layout and the loader cache keys per variant. Skips bot requests marked
+ * by the bot tracking middleware (`skipForBot`, default true).
  *
  * NOTE: Personalize requires Edge configuration (contextId/clientContextId) and
  * cannot work with local containers
@@ -198,3 +231,4 @@ if (isMainModule(import.meta.url)) {
  * Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions.
  */
 export const reqHandler = createNodeRequestHandler(app);
+export default reqHandler;

package/dist/templates/nextjs-app-router/sitecore.config.ts

@@ -4,4 +4,11 @@ import { defineConfig } from '@sitecore-content-sdk/nextjs/config';
  * See the documentation for `defineConfig`:
  * https://doc.sitecore.com/xmc/en/developers/content-sdk/the-sitecore-configuration-file.html
  */
-export default defineConfig({});
+export default defineConfig({
+  redirects: {
+    // Locale prefix strategy for App Router redirect targets, matching next-intl's
+    // `localePrefix` in src/i18n/routing.ts. `as-needed` keeps the default locale bare
+    // and only prefixes non-default locales. Use `always` if routing prefixes every locale.
+    appLocalePrefix: 'as-needed',
+  },
+});

package/dist/templates/nextjs-app-router/src/i18n/routing.ts

@@ -8,8 +8,9 @@ export const routing = defineRouting({
   // Used when no locale matches
   defaultLocale: sitecoreConfig.defaultLanguage,
 
-  // No prefix is added for the default locale ("as-needed").
+  // Out of the box, syncs with the `appLocalePrefix` redirects setting for consistent behavior
+  // For "as-needed" value, no prefix is added for the default locale .
   // For other configuration options, refer to the next-intl documentation:
   // https://next-intl.dev/docs/routing/configuration
-  localePrefix: 'as-needed',
+  localePrefix: sitecoreConfig.redirects?.appLocalePrefix || 'as-needed',
 });

package/dist/templates/nextjs-app-router-cache-components/sitecore.config.ts

@@ -14,4 +14,10 @@ export default defineConfig({
       enabled: false,
     },
   },
+  redirects: {
+    // Locale prefix strategy for App Router redirect targets, matching next-intl's
+    // `localePrefix` in src/i18n/routing.ts. `as-needed` keeps the default locale bare
+    // and only prefixes non-default locales. Use `always` if routing prefixes every locale.
+    appLocalePrefix: 'as-needed',
+  },
 });

package/dist/templates/nextjs-app-router-cache-components/src/app/[site]/[locale]/[[...path]]/page.tsx

@@ -29,20 +29,13 @@ export default async function Page({ params, searchParams }: PageProps) {
     notFound();
   }
 
-  // Cached fetch first so missing routes can notFound() without dynamic APIs in the ancestor tree.
-  const cachedPage = await getSitecorePage({ site, locale, path: path ?? [] });
-
-  if (!cachedPage) {
-    setCachedPageParams({ site, locale });
-    notFound();
-  }
-
   // Set site and locale to be available in src/i18n/request.ts for fetching the dictionary
   setRequestLocale(`${site}_${locale}`);
 
+  // Draft/preview first so editing is not blocked by locale-dependent cached lookups.
+  // Editing often resolves language via query string, while [locale] may fall back to defaultLanguage.
   const draft = await draftMode();
 
-  // Fetch the page data from Sitecore
   let page;
   if (draft.isEnabled) {
     const editingParams = await searchParams;
@@ -52,7 +45,7 @@ export default async function Page({ params, searchParams }: PageProps) {
       page = await client.getPreview(editingParams);
     }
   } else {
-    page = cachedPage;
+    page = await getSitecorePage({ site, locale, path: path ?? [] });
   }
 
   // If the page is not found, return a 404

package/dist/templates/nextjs-app-router-cache-components/src/i18n/routing.ts

@@ -8,8 +8,9 @@ export const routing = defineRouting({
   // Used when no locale matches
   defaultLocale: sitecoreConfig.defaultLanguage,
 
-  // No prefix is added for the default locale ("as-needed").
+  // Out of the box, syncs with the `appLocalePrefix` redirects setting for consistent behavior
+  // For "as-needed" value, no prefix is added for the default locale .
   // For other configuration options, refer to the next-intl documentation:
   // https://next-intl.dev/docs/routing/configuration
-  localePrefix: 'as-needed',
+  localePrefix: sitecoreConfig.redirects?.appLocalePrefix || 'as-needed',
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-content-sdk-app",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "Sitecore Content SDK initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -38,11 +38,11 @@
     "minimist": "^1.2.8"
   },
   "devDependencies": {
-    "@sitecore-content-sdk/analytics-core": "^2.1.1",
-    "@sitecore-content-sdk/angular": "~0.1.0",
-    "@sitecore-content-sdk/cli": "^2.2.0",
-    "@sitecore-content-sdk/events": "^2.1.1",
-    "@sitecore-content-sdk/nextjs": "^2.2.1",
+    "@sitecore-content-sdk/analytics-core": "^2.1.2",
+    "@sitecore-content-sdk/angular": "~0.2.0",
+    "@sitecore-content-sdk/cli": "^2.2.1",
+    "@sitecore-content-sdk/events": "^2.1.2",
+    "@sitecore-content-sdk/nextjs": "^2.3.0",
     "@sitecore-content-sdk/personalize": "^2.1.0",
     "@stylistic/eslint-plugin": "^5.2.2",
     "@types/chai": "^5.2.2",