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

package/dist/common/processes/transform.js

@@ -183,10 +183,8 @@ const diffAndWriteFiles = (_a) => __awaiter(void 0, [_a], void 0, function* ({ r
 exports.diffAndWriteFiles = diffAndWriteFiles;
 const populateEjsData = (answers, destination) => {
     // pass in helper to answers object
-    // Don't expose canary build number in the generated app
-    const jssVersion = version.includes('canary')
-        ? version.replace(/(-canary\.\d+)$/, '-canary')
-        : version;
+    // Use exact version for jss dependencies in beta and canary versions
+    const jssVersion = version.match(/(\-[a-zA-Z]+\.\d+)$/) ? version : `~${version}`;
     const ejsData = Object.assign(Object.assign({}, answers), { version: jssVersion, helper: {
             isDev: (0, helpers_1.isDevEnvironment)(destination || answers.destination),
             getPascalCaseName: helpers_1.getPascalCaseName,

package/dist/templates/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "<%- appName %>",
-  "version": "<%- version %>",
+  "version": "0.1.0",
   "description": "Application utilizing Sitecore JavaScript Services and Angular (angular-cli).",
   "config": {
     "appName": "<%- appName %>",
@@ -45,20 +45,20 @@
   "homepage": "https://jss.sitecore.com",
   "license": "Apache-2.0",
   "dependencies": {
-    "@angular/animations": "~17.3.11",
-    "@angular/common": "~17.3.11",
-    "@angular/compiler": "~17.3.11",
-    "@angular/core": "~17.3.11",
-    "@angular/forms": "~17.3.11",
-    "@angular/platform-browser": "~17.3.11",
-    "@angular/platform-browser-dynamic": "~17.3.11",
-    "@angular/platform-server": "~17.3.11",
-    "@angular/router": "~17.3.11",
-    "@apollo/client": "^3.3.12",
+    "@angular/animations": "~18.2.13",
+    "@angular/common": "~18.2.13",
+    "@angular/compiler": "~18.2.13",
+    "@angular/core": "~18.2.13",
+    "@angular/forms": "~18.2.13",
+    "@angular/platform-browser": "~18.2.13",
+    "@angular/platform-browser-dynamic": "~18.2.13",
+    "@angular/platform-server": "~18.2.13",
+    "@angular/router": "~18.2.13",
+    "@apollo/client": "^3.12.9",
     "@ngx-translate/core": "~15.0.0",
     "@ngx-translate/http-loader": "~8.0.0",
-    "@sitecore-jss/sitecore-jss-angular": "~<%- version %>",
-    "apollo-angular": "~6.0.0",
+    "@sitecore-jss/sitecore-jss-angular": "<%- version %>",
+    "apollo-angular": "~8.0.2",
     "bootstrap": "^5.3.3",
     "core-js": "~3.37.1",
     "graphql": "15.5.0",
@@ -69,19 +69,19 @@
     "reflect-metadata": "^0.2.2"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^17.0.2",
-    "@angular-devkit/build-angular": "^17.3.8",
-    "@angular-eslint/builder": "^17.5.2",
-    "@angular-eslint/eslint-plugin": "^17.5.2",
-    "@angular-eslint/eslint-plugin-template": "^17.5.2",
-    "@angular-eslint/schematics": "^17.5.2",
-    "@angular-eslint/template-parser": "^17.5.2",
-    "@angular/cli": "~17.3.8",
-    "@angular/compiler-cli": "~17.3.11",
-    "@angular/language-service": "~17.3.11",
-    "@sitecore-jss/sitecore-jss-angular-schematics": "~<%- version %>",
-    "@sitecore-jss/sitecore-jss-cli": "~<%- version %>",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~<%- version %>",
+    "@angular-builders/custom-webpack": "^18.0.0",
+    "@angular-devkit/build-angular": "^18.2.14",
+    "@angular-eslint/builder": "^18.4.3",
+    "@angular-eslint/eslint-plugin": "^18.4.3",
+    "@angular-eslint/eslint-plugin-template": "^18.4.3",
+    "@angular-eslint/schematics": "^18.4.3",
+    "@angular-eslint/template-parser": "^18.4.3",
+    "@angular/cli": "~18.2.13",
+    "@angular/compiler-cli": "~18.2.13",
+    "@angular/language-service": "~18.2.13",
+    "@sitecore-jss/sitecore-jss-angular-schematics": "<%- version %>",
+    "@sitecore-jss/sitecore-jss-cli": "<%- version %>",
+    "@sitecore-jss/sitecore-jss-dev-tools": "<%- version %>",
     "@types/jasmine": "~3.6.7",
     "@types/jasminewd2": "~2.0.8",
     "@types/node": "~22.9.0",

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

@@ -7,9 +7,6 @@ SITECORE_EDGE_CONTEXT_ID=
 
 # ========== XM Cloud Proxy ===========
 
-# Your XM Cloud Proxy hostname is needed to build the app and execute the client-side requests against the proxy server.
-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.
 # Use a relative unix style path to ensure compatibility when deployment runs on Windows or Unix based systems. 
 PROXY_BUILD_PATH=<%- locals.relativeProxyAppDestination.replace(/\\/g, '\/') %>dist

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

@@ -77,7 +77,6 @@ The following environment variables can be used to configure the angular app. Yo
 
 | 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 XM Cloud Proxy application path. Default value `<xmcloud_proxy_path>\dist`.
 | `SITECORE_EDGE_CONTEXT_ID`                              | The Context ID, which covers many system configurations, is 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 editing host, this value is always set to the preview Context ID.                   |
 | `SITECORE_API_KEY`                              | The API key for GRAPH_QL_ENDPOINT authentication. It should be used in combination with SITECORE_API_HOST for local development when connecting to a local XM Cloud instance

package/dist/templates/angular-xmcloud/scripts/config/plugins/xmcloud.ts

@@ -12,7 +12,6 @@ class XMCloudPlugin implements ConfigPlugin {
 
   async exec(config: JssConfig) {
     const proxyBuildPath = process.env[`${constantCase('proxyBuildPath')}`]?.replace(/\/$/, '');
-    const proxyHost = process.env[`${constantCase('proxyHost')}`];
 
     const sitecoreEdgeUrl =
       process.env[`${constantCase('sitecoreEdgeUrl')}`]?.replace(/\/$/, '') ||
@@ -30,7 +29,6 @@ class XMCloudPlugin implements ConfigPlugin {
 
     return Object.assign({}, config, {
       proxyBuildPath,
-      proxyHost,
       sitecoreEdgeUrl,
       sitecoreEdgeContextId,
       personalizeScope,

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

@@ -11,7 +11,6 @@ export interface JssConfig extends Record<string, string | boolean | undefined>
   graphQLEndpointPath?: string;
   defaultServerRoute?: string;
   proxyBuildPath?: string;
-  proxyHost?: string;
   sitecoreEdgeUrl?: string;
   sitecoreEdgeContextId?: string;
 }

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

@@ -17,15 +17,11 @@ export const getGraphQLClientFactoryConfig = () => {
   const isProduction = env.production === 'true';
 
   if (isProduction) {
-    if (!env.proxyHost) {
-      throw new Error('Please configure your proxyHost.');
-    }
-
     if (env.sitecoreEdgeContextId) {
       clientConfig = {
         endpoint: isServer
           ? getEdgeProxyContentUrl(env.sitecoreEdgeContextId, env.sitecoreEdgeUrl)
-          : getEdgeProxyContentUrl(env.sitecoreEdgeContextId, env.proxyHost),
+          : getEdgeProxyContentUrl(env.sitecoreEdgeContextId, ''),
       };
     } else if (env.graphQLEndpoint && env.sitecoreApiKey) {
       // we ignore ssr-proxy and query CM directly in case apiKey is used (i.e. in dev docker deployments)

package/dist/templates/nextjs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "<%- appName %>",
   "description": "Application utilizing Sitecore JavaScript Services and Next.js",
-  "version": "<%- version %>",
+  "version": "0.1.0",
   "private": true,
   "config": {
     "appName": "<%- appName %>",
@@ -25,7 +25,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@sitecore-jss/sitecore-jss-nextjs": "~<%- version %>",
+    "@sitecore-jss/sitecore-jss-nextjs": "<%- version %>",
     "graphql": "~15.8.0",
     "graphql-tag": "^2.12.6",
     "next": "^14.2.18",
@@ -43,8 +43,8 @@
     "@graphql-codegen/typescript-operations": "^4.0.1",
     "@graphql-codegen/typescript-resolvers": "^4.0.1",
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@sitecore-jss/sitecore-jss-cli": "~<%- version %>",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~<%- version %>",
+    "@sitecore-jss/sitecore-jss-cli": "<%- version %>",
+    "@sitecore-jss/sitecore-jss-dev-tools": "<%- version %>",
     "@types/node": "^22.9.0",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.0.5",

package/dist/templates/nextjs-styleguide/package.json

@@ -4,7 +4,7 @@
     "nprogress": "~0.2.0"
   },
   "devDependencies": {
-    "@sitecore-jss/sitecore-jss-dev-tools": "~<%- version %>",
+    "@sitecore-jss/sitecore-jss-dev-tools": "<%- version %>",
     "@types/nprogress": "^0.2.0"
   },
   "scripts": {

package/dist/templates/nextjs-sxa/src/components/ColumnSplitter.tsx

@@ -11,7 +11,7 @@ interface ComponentProps {
 }
 
 export const Default = (props: ComponentProps): JSX.Element => {
-  const styles = `${props.params.GridParameters ?? ''} ${props.params.Styles ?? ''}`.trimEnd();
+  const styles = `${props?.params?.GridParameters ?? ''} ${props?.params?.Styles ?? ''}`.trimEnd();
   const columnWidths = [
     props.params.ColumnWidth1,
     props.params.ColumnWidth2,

package/dist/templates/nextjs-sxa/src/components/Container.tsx

@@ -11,12 +11,12 @@ interface ComponentProps {
 }
 
 const DefaultContainer = (props: ComponentProps): JSX.Element => {
-  const containerStyles = props.params && props.params.Styles ? props.params.Styles : '';
-  const styles = `${props.params.GridParameters} ${containerStyles}`.trimEnd();
-  const phKey = `container-${props.params.DynamicPlaceholderId}`;
-  const id = props.params.RenderingIdentifier;
+  const containerStyles = props?.params?.Styles ?? '';
+  const styles = `${props?.params?.GridParameters} ${containerStyles}`.trimEnd();
+  const phKey = `container-${props?.params?.DynamicPlaceholderId}`;
+  const id = props?.params?.RenderingIdentifier;
   const mediaUrlPattern = new RegExp(/mediaurl=\"([^"]*)\"/, 'i');
-  let backgroundImage = props.params.BackgroundImage as string;
+  let backgroundImage = props?.params?.BackgroundImage as string;
   let backgroundStyle: { [key: string]: string } = {};
 
   if (backgroundImage && backgroundImage.match(mediaUrlPattern)) {

package/dist/templates/nextjs-sxa/src/components/Image.tsx

@@ -22,7 +22,7 @@ type ImageProps = {
 };
 
 const ImageDefault = (props: ImageProps): JSX.Element => (
-  <div className={`component image ${props.params.styles}`.trimEnd()}>
+  <div className={`component image ${props?.params?.styles}`.trimEnd()}>
     <div className="component-content">
       <span className="is-empty-hint">Image</span>
     </div>
@@ -49,16 +49,16 @@ export const Banner = (props: ImageProps): JSX.Element => {
           .replace(`height="${props?.fields?.Image?.value?.height}"`, 'height="100%"'),
       }
     : {
-      ...props.fields.Image,
-      value: {
-        ...props.fields.Image.value,
-        style: { width: '100%', height: '100%' },
-      },
-    };
+        ...props.fields.Image,
+        value: {
+          ...props.fields.Image.value,
+          style: { width: '100%', height: '100%' },
+        },
+      };
 
   return (
     <div
-      className={`component hero-banner ${props.params.styles} ${classHeroBannerEmpty}`}
+      className={`component hero-banner ${props?.params?.styles} ${classHeroBannerEmpty}`}
       id={id ? id : undefined}
     >
       <div className="component-content sc-sxa-image-hero-banner" style={backgroundStyle}>
@@ -76,7 +76,7 @@ export const Default = (props: ImageProps): JSX.Element => {
     const id = props.params.RenderingIdentifier;
 
     return (
-      <div className={`component image ${props.params.styles}`} id={id ? id : undefined}>
+      <div className={`component image ${props?.params?.styles}`} id={id ? id : undefined}>
         <div className="component-content">
           {sitecoreContext.pageState === 'edit' || !props.fields.TargetUrl?.value?.href ? (
             <Image />

package/dist/templates/nextjs-sxa/src/components/LinkList.tsx

@@ -52,7 +52,7 @@ const LinkListItem = (props: LinkListItemProps) => {
 
 export const Default = (props: LinkListProps): JSX.Element => {
   const datasource = props.fields?.data?.datasource;
-  const styles = `component link-list ${props.params.styles}`.trimEnd();
+  const styles = `component link-list ${props?.params?.styles}`.trimEnd();
   const id = props.params.RenderingIdentifier;
 
   if (datasource) {

package/dist/templates/nextjs-sxa/src/components/Navigation.tsx

@@ -52,7 +52,7 @@ export const Default = (props: NavigationProps): JSX.Element => {
   const { sitecoreContext } = useSitecoreContext();
   const styles =
     props.params != null
-      ? `${props.params.GridParameters ?? ''} ${props.params.Styles ?? ''}`.trimEnd()
+      ? `${props.params.GridParameters ?? ''} ${props?.params?.Styles ?? ''}`.trimEnd()
       : '';
   const id = props.params != null ? props.params.RenderingIdentifier : null;
 
@@ -110,7 +110,7 @@ export const Default = (props: NavigationProps): JSX.Element => {
 const NavigationList = (props: NavigationProps) => {
   const { sitecoreContext } = useSitecoreContext();
   const [active, setActive] = useState(false);
-  const classNameList = `${props.fields.Styles.concat('rel-level' + props.relativeLevel).join(
+  const classNameList = `${props?.fields?.Styles.concat('rel-level' + props.relativeLevel).join(
     ' '
   )}`;
 

package/dist/templates/nextjs-sxa/src/components/PageContent.tsx

@@ -23,7 +23,7 @@ type ComponentContentProps = {
 const ComponentContent = (props: ComponentContentProps) => {
   const id = props.id;
   return (
-    <div className={`component content ${props.styles}`} id={id ? id : undefined}>
+    <div className={`component content ${props?.styles}`} id={id ? id : undefined}>
       <div className="component-content">
         <div className="field-content">{props.children}</div>
       </div>
@@ -37,7 +37,7 @@ export const Default = (props: PageContentProps): JSX.Element => {
 
   if (!(props.fields && props.fields.Content) && !sitecoreContext?.route?.fields?.Content) {
     return (
-      <div className={`component content ${props.params.styles}`} id={id ? id : undefined}>
+      <div className={`component content ${props?.params?.styles}`} id={id ? id : undefined}>
         <div className="component-content">
           <div className="field-content">[Content]</div>
         </div>
@@ -50,7 +50,7 @@ export const Default = (props: PageContentProps): JSX.Element => {
     : sitecoreContext?.route?.fields?.Content) as RichTextField;
 
   return (
-    <ComponentContent styles={props.params.styles} id={id}>
+    <ComponentContent styles={props?.params?.styles} id={id}>
       <JssRichText field={field} />
     </ComponentContent>
   );

package/dist/templates/nextjs-sxa/src/components/Promo.tsx

@@ -21,7 +21,7 @@ type PromoProps = {
 };
 
 const PromoDefaultComponent = (props: PromoProps): JSX.Element => (
-  <div className={`component promo ${props.params.styles}`}>
+  <div className={`component promo ${props?.params?.styles}`}>
     <div className="component-content">
       <span className="is-empty-hint">Promo</span>
     </div>
@@ -32,7 +32,7 @@ export const Default = (props: PromoProps): JSX.Element => {
   const id = props.params.RenderingIdentifier;
   if (props.fields) {
     return (
-      <div className={`component promo ${props.params.styles}`} id={id ? id : undefined}>
+      <div className={`component promo ${props?.params?.styles}`} id={id ? id : undefined}>
         <div className="component-content">
           <div className="field-promoicon">
             <JssImage field={props.fields.PromoIcon} />
@@ -59,7 +59,7 @@ export const WithText = (props: PromoProps): JSX.Element => {
   const id = props.params.RenderingIdentifier;
   if (props.fields) {
     return (
-      <div className={`component promo ${props.params.styles}`} id={id ? id : undefined}>
+      <div className={`component promo ${props?.params?.styles}`} id={id ? id : undefined}>
         <div className="component-content">
           <div className="field-promoicon">
             <JssImage field={props.fields.PromoIcon} />

package/dist/templates/nextjs-sxa/src/components/RichText.tsx

@@ -20,7 +20,7 @@ export const Default = (props: RichTextProps): JSX.Element => {
 
   return (
     <div
-      className={`component rich-text ${props.params.styles.trimEnd()}`}
+      className={`component rich-text ${props?.params?.styles.trimEnd()}`}
       id={id ? id : undefined}
     >
       <div className="component-content">{text}</div>

package/dist/templates/nextjs-sxa/src/components/RowSplitter.tsx

@@ -11,7 +11,7 @@ interface ComponentProps {
 }
 
 export const Default = (props: ComponentProps): JSX.Element => {
-  const styles = `${props.params.GridParameters ?? ''} ${props.params.Styles ?? ''}`.trimEnd();
+  const styles = `${props?.params?.GridParameters ?? ''} ${props?.params?.Styles ?? ''}`.trimEnd();
   const rowStyles = [
     props.params.Styles1,
     props.params.Styles2,

package/dist/templates/nextjs-sxa/src/components/Title.tsx

@@ -52,7 +52,7 @@ type ComponentContentProps = {
 const ComponentContent = (props: ComponentContentProps) => {
   const id = props.id;
   return (
-    <div className={`component title ${props.styles}`} id={id ? id : undefined}>
+    <div className={`component title ${props?.styles}`} id={id ? id : undefined}>
       <div className="component-content">
         <div className="field-title">{props.children}</div>
       </div>
@@ -79,7 +79,7 @@ export const Default = (props: TitleProps): JSX.Element => {
   }
 
   return (
-    <ComponentContent styles={props.params.styles} id={props.params.RenderingIdentifier}>
+    <ComponentContent styles={props?.params?.styles} id={props?.params?.RenderingIdentifier}>
       <>
         {sitecoreContext.pageEditing ? (
           <Text field={text} />

package/dist/templates/node-headless-ssr-experience-edge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "node-headless-ssr-experience-edge-sample",
-  "version": "<%- version %>",
+  "version": "0.1.0",
   "description": "Node server-side-rendering sample for running JSS apps under Node hosting using Experience Edge",
   "scripts": {
     "start": "ts-node ./src/index.ts"
@@ -19,7 +19,7 @@
   "homepage": "https://jss.sitecore.com",
   "license": "Apache-2.0",
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "~<%- version %>",
+    "@sitecore-jss/sitecore-jss": "<%- version %>",
     "compression": "^1.7.4",
     "express": "^4.18.2",
     "dotenv": "^16.0.3"

package/dist/templates/node-headless-ssr-proxy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "node-headless-ssr-proxy-sample",
-  "version": "<%- version %>",
+  "version": "0.1.0",
   "description": "Node server-side-rendering proxy sample for running JSS apps under Node hosting",
   "scripts": {
     "start": "ts-node ./src/index.ts"
@@ -19,8 +19,8 @@
   "homepage": "https://jss.sitecore.com",
   "license": "Apache-2.0",
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "~<%- version %>",
-    "@sitecore-jss/sitecore-jss-proxy": "~<%- version %>",
+    "@sitecore-jss/sitecore-jss": "<%- version %>",
+    "@sitecore-jss/sitecore-jss-proxy": "<%- version %>",
     "agentkeepalive": "^4.2.1",
     "compression": "~1.7.4",
     "express": "~4.19.2",

package/dist/templates/node-xmcloud-proxy/README.md

@@ -91,64 +91,73 @@ If the operation is successful, you’ll see the following message:
 
 Follow these steps to deploy your application to Netlify. The deployed site can be used as an editing host in XM Cloud.
 
-1. Run `npm init` in the root directory (which contains SPA and Node XM Cloud Proxy app folder) 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>"
-   ```
+1. Run `npm init` in the root directory (which contains SPA and Node XM Cloud Proxy app folders) and add the following scripts to package.json:
+    ```
+    "build": "cd ./<your-proxy-app-folder> && npm run build-all && cd ..",
+    "install": "cd ./<your-proxy-app-folder> && npm install && npm run install-all && cd .."
+    ```
+2. Ensure that `<your-proxy-app-folder>/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-folder> && tsc",
+    "install-all": "cd ../angular && npm i && cd ../<your-proxy-app-folder> && npm i"
+    ```
 3. Configure `serverless-http`:
-    - Install the npm package
-      ```
-        npm i serverless-http
-        ```
-    - Import serverless-http in `<your-proxy-app-name>/src/index.ts` file.
+    - Install the serverless-http package :
+        - If you're deploying a standalone Angular app with the Node proxy, run the following command inside your proxy app folder:
+          ```
+          npm i serverless-http
+          ```
+        - If you're working within the pnpm setup context of the [xmcloud-foundation-head](https://github.com/sitecorelabs/xmcloud-foundation-head), run the following command inside your proxy app folder:
+          ```
+          pnpm add serverless-http
+          ```
+    - Import serverless-http in `<your-proxy-app-folder>/src/index.ts` file and export the serverless handler:
         ```
-          export const handler = serverless(server);
+        import serverless from 'serverless-http';
+        ...
+        export const handler = serverless(server);
         ```
 4. Create a `netlify.toml` file and ensure that the following Netlify configuration is added there:
-   - The following allows the proxy app to be 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, you might need to add the following redirects statement to the toml file:
-     ```
-        [[redirects]]
-        from = "/dist/browser/*"
-        status = 200
-        to = "/browser/:splat"
-     ```
-   - By default, redirects won’t be applied if there’s a file with the same path as the one defined in the `from` property. Setting `force` to `true` will make the redirect rule take precedence over any existing files.
-     ```
-       [[redirects]]
-       from = "/*"
-       status = 200
-       to = "/.netlify/functions/index/:splat"
-       force = true
-     ```
-   - Add the following build command:
-     ```
-     [build]
-     command = "npm run build"
-     publish = "<your-proxy-app-name>/dist"
-     ```
+    ```
+    [functions]
+    directory = "<your-proxy-app-folder>/src"
+    node_bundler = "esbuild"
+    included_files = ["<your-proxy-app-folder>/dist/**"]
+    [[redirects]]
+    from = "/dist/browser/*"
+    status = 200
+    to = "/browser/:splat"
+    [[redirects]]
+    from = "/*"
+    status = 200
+    to = "/.netlify/functions/index/:splat"
+    force = true
+    [build]
+    command = "npm run build"
+    publish = "<your-proxy-app-folder>/dist"
+    ```
+   - The `[functions]` section allows the proxy app to be treated as Netlify functions. [Functions Overview](https://docs.netlify.com/functions/overview/)
+   - The first `[[redirects]]` section ensures that static assets are accessed properly.
+   - The second `[[redirects]]` section means that, by default, redirects aren't applied if a file exists at the same path as the one defined in the `from` property. Setting `force` to `true` ensures the redirect rule takes precedence over existing files, preventing files in the deploy folder from being publicly accessible.
+
 5. Create your [Netlify deployment](https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/):
    - Set up all your necessary environment variables like `SITECORE_EDGE_CONTEXT_ID`, `SITECORE_SITE_NAME` etc.
+   - Configure Netlify to use the latest LTS version of Node.js.
    - Configure your build settings in the Build and Deploy tab under Site configuration.
-      - sample configuration:
-       ```
-        Base Directory: /
-        Build command: npm run build
-        Publish directory: /proxy/dist
-        Functions directory: /proxy/src
-        ```
+      - sample configuration for standalone Angular + proxy deployment:
+      ```
+      Base directory: /
+      Build command: npm run build
+      Publish directory: /proxy/dist
+      Functions directory: /proxy/src
+      ```
+      - Sample configuration for use within the context of [xmcloud-foundation-head](https://github.com/sitecorelabs/xmcloud-foundation-head): 
+      ```
+      Base directory: /headapps/spa-starters/
+      Build command: npm run build
+      Publish directory:  /headapps/spa-starters/proxy/dist
+      Functions directory:  /headapps/spa-starters/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`
 
 ### Deploy to Vercel

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

@@ -1,6 +1,6 @@
 {
   "name": "node-xmcloud-sample",
-  "version": "<%- version %>",
+  "version": "0.1.0",
   "description": "Node XM Cloud Proxy sample for running XM Cloud JSS SPA apps",
   "author": {
     "name": "Sitecore Corporation",
@@ -10,14 +10,14 @@
     "start": "ts-node ./src/index.ts"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss-proxy": "~<%- version %>",
+    "@sitecore-jss/sitecore-jss-proxy": "<%- version %>",
     "compression": "^1.7.4",
     "express": "^4.18.2",
     "dotenv": "^16.0.3",
     "http-proxy-middleware": "^3.0.0"
   },
   "devDependencies": {
-    "@sitecore-jss/sitecore-jss": "~<%- version %>",
+    "@sitecore-jss/sitecore-jss": "<%- version %>",
     "@types/compression": "^1.7.2",
     "@types/express": "^4.17.17",
     "ts-node": "^10.9.1",

package/dist/templates/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "<%- appName %>",
   "description": "Application utilizing Sitecore JavaScript Services and React (create-react-app).",
-  "version": "<%- version %>",
+  "version": "0.1.0",
   "private": true,
   "config": {
     "appName": "<%- appName %>",
@@ -28,7 +28,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@sitecore-jss/sitecore-jss-react": "~<%- version %>",
+    "@sitecore-jss/sitecore-jss-react": "<%- version %>",
     "bootstrap": "^5.2.3",
     "cross-fetch": "^3.1.5",
     "fast-deep-equal": "^3.1.3",
@@ -52,9 +52,9 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/register": "~7.18.9",
-    "@sitecore-jss/sitecore-jss-cli": "~<%- version %>",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~<%- version %>",
-    "@sitecore-jss/sitecore-jss-rendering-host": "~<%- version %>",
+    "@sitecore-jss/sitecore-jss-cli": "<%- version %>",
+    "@sitecore-jss/sitecore-jss-dev-tools": "<%- version %>",
+    "@sitecore-jss/sitecore-jss-rendering-host": "<%- version %>",
     "babel-loader": "~9.1.0",
     "babel-preset-react-app": "~10.0.1",
     "chalk": "~4.1.2",

package/dist/templates/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "<%- appName %>",
-  "version": "<%- version %>",
+  "version": "0.1.0",
   "description": "A basic React Native app utilizing Sitecore JavaScript Services",
   "config": {
     "appName": "<%- appName %>",
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@react-native-community/masked-view": "^0.1.10",
-    "@sitecore-jss/sitecore-jss-react-native": "~<%- version %>",
+    "@sitecore-jss/sitecore-jss-react-native": "<%- version %>",
     "prop-types": "^15.6.0",
     "react": "16.13.1",
     "react-native": "^0.63.4",
@@ -37,8 +37,8 @@
   },
   "private": true,
   "devDependencies": {
-    "@sitecore-jss/sitecore-jss-cli": "~<%- version %>",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~<%- version %>",
+    "@sitecore-jss/sitecore-jss-cli": "<%- version %>",
+    "@sitecore-jss/sitecore-jss-dev-tools": "<%- version %>",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.1",
     "babel-plugin-inline-replace-variables": "^1.3.1",

package/dist/templates/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "<%- appName %>",
-  "version": "<%- version %>",
+  "version": "0.1.0",
   "description": "Application utilizing Sitecore JavaScript Services and Vue (vue-cli).",
   "private": true,
   "config": {
@@ -45,7 +45,7 @@
   "dependencies": {
     "@apollo/client": "^3.7.4",
     "@panter/vue-i18next": "~0.15.2",
-    "@sitecore-jss/sitecore-jss-vue": "~<%- version %>",
+    "@sitecore-jss/sitecore-jss-vue": "<%- version %>",
     "@vue/apollo-composable": "4.0.0-beta.2",
     "@vue/apollo-option": "^4.0.0",
     "@vue/apollo-ssr": "^4.0.0",
@@ -62,8 +62,8 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",
     "@babel/register": "7.18.9",
-    "@sitecore-jss/sitecore-jss-cli": "~<%- version %>",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~<%- version %>",
+    "@sitecore-jss/sitecore-jss-cli": "<%- version %>",
+    "@sitecore-jss/sitecore-jss-dev-tools": "<%- version %>",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-service": "~5.0.8",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.6.0-canary.1",
+  "version": "22.6.0-canary.11",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -65,5 +65,5 @@
     "ts-node": "^10.9.1",
     "typescript": "~5.6.3"
   },
-  "gitHead": "582aae74ef08bf73f000eebcd25f87067893810a"
+  "gitHead": "05def8420598c33ce7232b7440b92a17ef4f6903"
 }