create-sitecore-jss 22.2.0-canary.10 → 22.2.0-canary.12

package/dist/templates/angular/.env

@@ -1,3 +1,5 @@
+# ====== Sitecore Preview / Delivery Edge ======
+
 # Your Sitecore API key is needed to build the app. Typically, the API key is
 # defined in `scjssconfig.json` (as `sitecore.apiKey`). This file may not exist
 # when building locally (if you've never run `jss setup`), or when building in a
@@ -17,6 +19,8 @@ SITECORE_API_HOST=
 # the resolved Sitecore API hostname + the `graphQLEndpointPath` defined in your `package.json`.
 GRAPH_QL_ENDPOINT=
 
+# ==============================================
+
 # Your Sitecore site name.
 # Uses your `package.json` config `appName` if empty.
 SITECORE_SITE_NAME=

package/dist/templates/angular/package.json

@@ -81,7 +81,6 @@
     "@sitecore-jss/sitecore-jss-angular-schematics": "~22.2.0-canary",
     "@sitecore-jss/sitecore-jss-cli": "~22.2.0-canary",
     "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.0-canary",
-    "@types/isomorphic-fetch": "0.0.35",
     "@types/jasmine": "~3.6.7",
     "@types/jasminewd2": "~2.0.8",
     "@types/node": "~20.14.10",
@@ -99,7 +98,6 @@
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsdoc": "48.7.0",
     "eslint-plugin-prefer-arrow": "1.2.3",
-    "isomorphic-fetch": "^3.0.0",
     "jasmine-core": "~3.7.1",
     "jasmine-spec-reporter": "~6.0.0",
     "karma": "^6.3.2",

package/dist/templates/angular/scripts/config/plugins/fallback.ts

@@ -12,7 +12,6 @@ class FallbackPlugin implements ConfigPlugin {
   async exec(config: JssConfig) {
     return Object.assign({}, config, {
       defaultLanguage: config.defaultLanguage || 'en',
-      sitecoreApiKey: config.sitecoreApiKey || 'no-api-key-set',
       <% if (!locals.xmcloud) { -%>
       layoutServiceConfigurationName: config.layoutServiceConfigurationName || 'default',
       <% } -%>

package/dist/templates/angular/scripts/generate-config.ts

@@ -1,3 +1,4 @@
+import 'dotenv/config';
 import * as fs from 'fs';
 import * as path from 'path';
 import { constantCase } from 'constant-case';
@@ -38,6 +39,14 @@ export function generateConfig(
   defaultConfig: JssConfig = defaultConfigValue,
   configOverrides?: { [key: string]: unknown }
 ) {
+  // Handle undefined values
+  defaultConfig = Object.keys(defaultConfig).reduce((acc, key) => {
+    return {
+      ...acc,
+      [key]: defaultConfig[key] || '',
+    };
+  }, {});
+
   jssConfigFactory
     .create(defaultConfig)
     .then((config) => {
@@ -67,9 +76,11 @@ export function writeConfig(config: JssConfig, outputPath?: string) {
 
   // Set base configuration values, allowing override with environment variables
   Object.keys(config).forEach((prop) => {
-    configText += `config.${prop} = process.env.${constantCase(prop)} || "${config[prop]
-      ?.toString()
-      .trim()}";\n`;
+    // Handle undefined values
+    const value = config[prop] || '';
+    configText += `config.${prop} = process.env.${constantCase(
+      prop
+    )} || "${value.toString().trim()}";\n`;
   });
 
   configText += `module.exports.environment = config;`;

package/dist/templates/angular/scripts/update-graphql-fragment-data.ts

@@ -1,6 +1,7 @@
-import * as fetch from 'isomorphic-fetch';
 import * as fs from 'fs';
 import { generateConfig } from './generate-config';
+import clientFactory from 'lib/graphql-client-factory';
+import { getGraphQLClientFactoryConfig } from 'lib/graphql-client-factory/config';
 
 // Apollo Client supports caching GraphQL responses, which can greatly reduce network traffic needs.
 // In order to work correctly with interfaces in GraphQL, it needs to know some basic information about
@@ -11,26 +12,21 @@ import { generateConfig } from './generate-config';
 
 generateConfig('src/environments/environment.js');
 
-let jssConfig;
+const clientFactoryConfig = getGraphQLClientFactoryConfig();
 
-try {
-  jssConfig = require('../src/environments/environment').environment;
-} catch (e) {
-  console.error(
-    'Unable to require JSS config. Ensure `jss setup` has been run, and the app has been started at least once after setup.'
-  );
-  console.error(e);
-  process.exit(1);
-}
+console.log(`Updating GraphQL fragment type data from ${clientFactoryConfig.endpoint}...`);
 
-console.log(`Updating GraphQL fragment type data from ${jssConfig.graphQLEndpoint}...`);
-
-fetch(jssConfig.graphQLEndpoint, {
-  method: 'POST',
-  headers: { 'Content-Type': 'application/json', sc_apikey: jssConfig.sitecoreApiKey },
-  body: JSON.stringify({
-    query: `
-      {
+clientFactory()
+  .request<{
+    [key: string]: unknown;
+    __schema: {
+      kind: string;
+      name: string;
+      types: { possibleTypes?: { name: string } }[];
+    };
+  }>(
+    `
+      { 
         __schema {
           types {
             kind
@@ -41,22 +37,18 @@ fetch(jssConfig.graphQLEndpoint, {
           }
         }
       }
-    `,
-  }),
-})
-  .then((result) => result.json())
+    `
+  )
   .then((result) => {
     // here we're filtering out any type information unrelated to unions or interfaces
-    const filteredData = result.data.__schema.types.filter(
-      (type: { possibleTypes: Array<string> }) => type.possibleTypes !== null
-    );
+    const filteredData = result.__schema.types.filter((type) => type.possibleTypes !== null);
 
     const filteredResult = { ...result };
-    filteredResult.data.__schema.types = filteredData;
+    filteredResult.__schema.types = filteredData;
 
     fs.writeFile(
       './src/graphql-fragment-types.ts',
-      `export default ${JSON.stringify(filteredResult.data, null, 2)}`,
+      `export default ${JSON.stringify(filteredResult, null, 2)}`,
       (err) => {
         if (err) {
           console.error('Error writing GraphQLFragmentTypes file', err);

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

@@ -6,7 +6,8 @@ import 'zone.js';
 import { JssRouteBuilderService } from './src/app/routing/jss-route-builder.service';
 import { environment } from './src/environments/environment';
 import { AppServerModule, renderModule } from './src/main.server';
-import { clientFactory } from './src/app/lib/graphql-client-factory';
+import clientFactory from './src/app/lib/graphql-client-factory';
+import { getGraphQLClientFactoryConfig } from './src/app/lib/graphql-client-factory/config';
 import { dictionaryServiceFactory } from './src/app/lib/dictionary-service-factory';
 import { layoutServiceFactory } from './src/app/lib/layout-service-factory';
 
@@ -103,8 +104,7 @@ function parseRouteUrl(url: string) {
 const apiKey = environment.sitecoreApiKey;
 const siteName = environment.sitecoreSiteName;
 const defaultLanguage = environment.defaultLanguage;
-const graphQLEndpointPath = environment.graphQLEndpointPath;
-const graphQLEndpoint = environment.graphQLEndpoint;
+const getClientFactoryConfig = getGraphQLClientFactoryConfig;
 
 export {
   renderView,
@@ -113,9 +113,8 @@ export {
   apiKey,
   siteName,
   clientFactory,
+  getClientFactoryConfig,
   dictionaryServiceFactory,
   layoutServiceFactory,
   defaultLanguage,
-  graphQLEndpointPath,
-  graphQLEndpoint,
 };

package/dist/templates/angular/src/app/JssState.ts

@@ -1,12 +1,12 @@
 import { RouteData, LayoutServiceContextData } from '@sitecore-jss/sitecore-jss-angular';
 import { LayoutServiceError } from './layout/jss-layout.service';
 
-export class JssState<Fields = Record<string, unknown>> {
+export class JssState {
   language: string;
   serverRoute: string;
   routeFetchError?: LayoutServiceError;
   sitecore?: LayoutServiceContextData & {
-    route: RouteData<Fields>;
+    route: RouteData | null;
   };
   viewBag: { [key: string]: unknown };
 }

package/dist/templates/angular/src/app/app.module.ts

@@ -11,6 +11,7 @@ import { JssTranslationClientLoaderService } from './i18n/jss-translation-client
 import { JssTranslationLoaderService } from './i18n/jss-translation-loader.service';
 import { GraphQLModule } from './jss-graphql.module';
 import { JssMetaService } from './jss-meta.service';
+import { JssLinkService } from './jss-link.service';
 
 @NgModule({
   imports: [
@@ -32,6 +33,7 @@ import { JssMetaService } from './jss-meta.service';
     JssContextService,
     JssLayoutService,
     JssMetaService,
+    JssLinkService,
     // IMPORTANT: you must set the base href with this token, not a <base> tag in the HTML.
     // the Sitecore Experience Editor will not work correctly when a base tag is used.
     { provide: APP_BASE_HREF, useValue: '/' },

package/dist/templates/angular/src/app/lib/dictionary-service-factory.ts

@@ -7,7 +7,7 @@ import {
   <% } -%>
 } from '@sitecore-jss/sitecore-jss-angular';
 import { environment as env } from '../../environments/environment';
-import { clientFactory } from './graphql-client-factory';
+import clientFactory from './graphql-client-factory';
 
 export class DictionaryServiceFactory {
   create(): DictionaryService {
@@ -24,6 +24,9 @@ export class DictionaryServiceFactory {
       new GraphQLDictionaryService({
           clientFactory,
           siteName: env.sitecoreSiteName,
+          <% if (locals.xmcloud) { -%>
+          useSiteQuery: true,
+          <% } -%>
           /*
         The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current
         app. If your Sitecore instance only has 1 JSS App, you can specify the root item ID here;

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

@@ -0,0 +1,21 @@
+import { GraphQLRequestClientFactoryConfig } from '@sitecore-jss/sitecore-jss-angular/cjs';
+import { environment as env } from '../../../environments/environment';
+
+/**
+ * Gets the configuration for the GraphQLRequestClientFactory
+ * @returns GraphQLRequestClientFactoryConfig
+ */
+export const getGraphQLClientFactoryConfig = () => {
+  let clientConfig: GraphQLRequestClientFactoryConfig;
+
+  if (env.graphQLEndpoint && env.sitecoreApiKey) {
+    clientConfig = {
+      endpoint: env.graphQLEndpoint,
+      apiKey: env.sitecoreApiKey,
+    };
+  } else {
+    throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.');
+  }
+
+  return clientConfig;
+};

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

@@ -0,0 +1,16 @@
+import { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss-angular/cjs';
+import { getGraphQLClientFactoryConfig } from './config';
+
+// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application
+
+/**
+ * Creates a new GraphQLRequestClientFactory instance
+ * @returns GraphQLRequestClientFactory instance
+ */
+const createGraphQLClientFactory = () => {
+  const clientConfig = getGraphQLClientFactoryConfig();
+
+  return GraphQLRequestClient.createClientFactory(clientConfig);
+};
+
+export default createGraphQLClientFactory();

package/dist/templates/angular/src/app/lib/layout-service-factory.ts

@@ -7,7 +7,7 @@ import {
    <% } -%>
 } from '@sitecore-jss/sitecore-jss-angular';
 import { environment } from '../../environments/environment';
-import { clientFactory } from './graphql-client-factory';
+import clientFactory from './graphql-client-factory';
 
 export class LayoutServiceFactory {
   create(): LayoutService {

package/dist/templates/angular/src/app/routing/layout/layout.component.ts

@@ -9,12 +9,12 @@ import { JssMetaService } from '../../jss-meta.service';
 enum LayoutState {
   Layout,
   NotFound,
-  Error
+  Error,
 }
 
 interface RouteFields {
   [name: string]: unknown;
-  pageTitle: Field<string>;
+  pageTitle?: Field<string>;
 }
 
 @Component({
@@ -28,14 +28,11 @@ export class LayoutComponent implements OnInit, OnDestroy {
   subscription: Subscription;
   errorContextData: LayoutServiceContextData;
 
-  constructor(
-    private activatedRoute: ActivatedRoute,
-    private readonly meta: JssMetaService,
-  ) { }
+  constructor(private activatedRoute: ActivatedRoute, private readonly meta: JssMetaService) {}
 
   ngOnInit() {
     // route data is populated by the JssRouteResolver
-    this.subscription = this.activatedRoute.data.subscribe((data: { jssState: JssState<RouteFields> }) => {
+    this.subscription = this.activatedRoute.data.subscribe((data: { jssState: JssState }) => {
       if (!data.jssState) {
         this.state = LayoutState.NotFound;
         return;
@@ -48,13 +45,17 @@ export class LayoutComponent implements OnInit, OnDestroy {
       }
 
       if (data.jssState.routeFetchError) {
-        if (data.jssState.routeFetchError.status >= 400 && data.jssState.routeFetchError.status < 500) {
+        if (
+          data.jssState.routeFetchError.status >= 400 &&
+          data.jssState.routeFetchError.status < 500
+        ) {
           this.state = LayoutState.NotFound;
         } else {
           this.state = LayoutState.Error;
         }
 
-        this.errorContextData = data.jssState.routeFetchError.data && data.jssState.routeFetchError.data.sitecore;
+        this.errorContextData =
+          data.jssState.routeFetchError.data && data.jssState.routeFetchError.data.sitecore;
       }
     });
   }

package/dist/templates/angular-sxp/scripts/config/plugins/disconnected.ts

@@ -8,7 +8,7 @@ const chalk = require('chalk');
  */
 class DisconnectedPlugin implements ConfigPlugin {
   // should come before other plugins
-  order = 0;
+  order = 2;
 
   async exec(config: JssConfig) {
     const disconnected = process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED;
@@ -20,7 +20,9 @@ class DisconnectedPlugin implements ConfigPlugin {
       );
     }
 
-    return config;
+    return Object.assign({}, config, {
+      sitecoreApiKey: config.sitecoreApiKey || 'no-api-key-set',
+    });
   }
 }
 

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

@@ -1,4 +1,10 @@
 
+# ========== Sitecore Edge Platform ===========
+
+# Your unified Sitecore Edge Context Id.
+# This will be used over any Sitecore Preview / Delivery Edge variables (above).
+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.

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

@@ -1,6 +1,7 @@
 import { JssConfig } from 'lib/config';
 import { ConfigPlugin } from '..';
 import { constantCase } from 'constant-case';
+import chalk from 'chalk';
 
 /**
  * This plugin will set XM Cloud related config props.
@@ -13,9 +14,24 @@ class XMCloudPlugin implements ConfigPlugin {
     const proxyBuildPath = process.env[`${constantCase('proxyBuildPath')}`]?.replace(/\/$/, '');
     const proxyHost = process.env[`${constantCase('proxyHost')}`];
 
+    const sitecoreEdgeUrl =
+      process.env[`${constantCase('sitecoreEdgeUrl')}`]?.replace(/\/$/, '') ||
+      'https://edge-platform.sitecorecloud.io';
+    const sitecoreEdgeContextId = process.env[`${constantCase('sitecoreEdgeContextId')}`];
+
+    if (config.sitecoreApiKey && sitecoreEdgeContextId) {
+      console.log(
+        chalk.yellow(
+          "You have configured both 'sitecoreApiKey' and 'sitecoreEdgeContextId' values. The 'sitecoreEdgeContextId' is used instead."
+        )
+      );
+    }
+
     return Object.assign({}, config, {
       proxyBuildPath,
       proxyHost,
+      sitecoreEdgeUrl,
+      sitecoreEdgeContextId,
     });
   }
 }

package/dist/templates/angular-xmcloud/src/app/jss-link.service.ts

@@ -4,11 +4,7 @@ import { HTMLLink } from '@sitecore-jss/sitecore-jss-angular';
 
 @Injectable()
 export class JssLinkService {
-  document: Document;
-
-  constructor() {
-    this.document = Inject(DOCUMENT);
-  }
+  constructor(@Inject(DOCUMENT) private document: Document) {}
 
   /**
    * Adds link element in the document head.
@@ -19,6 +15,11 @@ export class JssLinkService {
       return;
     }
 
+    // Check if a link with the same rel and href already exists
+    if (this.isDuplicateLink(headLink)) {
+      return;
+    }
+
     this.createLink(headLink);
   }
 
@@ -39,13 +40,14 @@ export class JssLinkService {
   }
 
   /**
-   * Removes all link elements that match the specified rel attribute.
-   * @param rel - The rel attribute of the links to be removed.
+   * Checks for an existing link element with the same rel and href attributes.
+   * @param headLink - An HTMLLink object to be checked.
+   * @returns {boolean} - True if a matching link exists, false otherwise.
    */
-  removeLinksByRel(rel: string) {
-    const links = this.document.head.querySelectorAll(`link[rel="${rel}"]`);
-    links.forEach((link) => {
-      this.document.head.removeChild(link);
-    });
+  private isDuplicateLink(headLink: HTMLLink): boolean {
+    const existingLink = this.document.head.querySelector(
+      `link[rel='${headLink.rel}'][href='${headLink.href}']`
+    );
+    return !!existingLink;
   }
 }

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

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

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

@@ -0,0 +1,58 @@
+import {
+  GraphQLRequestClientFactoryConfig,
+  getEdgeProxyContentUrl,
+} from '@sitecore-jss/sitecore-jss-angular/cjs';
+import { environment as env } from '../../../environments/environment';
+
+/**
+ * Gets the configuration for the GraphQLRequestClientFactory
+ * @returns GraphQLRequestClientFactoryConfig
+ */
+export const getGraphQLClientFactoryConfig = () => {
+  let clientConfig: GraphQLRequestClientFactoryConfig;
+
+  // Server side requests should go directly to the Sitecore, browser requests should go through the proxy.
+  const isServer = typeof window === 'undefined';
+  // If we are in a production environment we are going to use Node XM Cloud proxy
+  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),
+      };
+    } else if (env.graphQLEndpoint && env.sitecoreApiKey) {
+      const graphQLEndpointPath = new URL(env.graphQLEndpoint).pathname;
+
+      clientConfig = {
+        endpoint: isServer ? env.graphQLEndpoint : `${env.proxyHost}${graphQLEndpointPath}`,
+        apiKey: env.sitecoreApiKey,
+      };
+    }
+  } else {
+    if (env.sitecoreEdgeContextId) {
+      clientConfig = {
+        endpoint: getEdgeProxyContentUrl(env.sitecoreEdgeContextId, env.sitecoreEdgeUrl),
+      };
+    } else if (env.graphQLEndpoint && env.sitecoreApiKey) {
+      clientConfig = {
+        endpoint: env.graphQLEndpoint,
+        apiKey: env.sitecoreApiKey,
+      };
+    }
+  }
+
+  if (!clientConfig.endpoint) {
+    throw new Error(
+      'Please configure either your sitecoreEdgeContextId, or your graphQLEndpoint and sitecoreApiKey.'
+    );
+  }
+
+  return clientConfig;
+};

package/dist/templates/angular-xmcloud/src/app/routing/layout/layout.component.html

@@ -25,7 +25,7 @@
         <sc-placeholder
           name="headless-footer"
           [rendering]="route"
-          (loaded)="onMainPlaceholderLoaded($event)"
+          (loaded)="onPlaceholderLoaded($event)"
         ></sc-placeholder>
       </div>
     </footer>

package/dist/templates/angular-xmcloud/src/app/routing/layout/layout.component.ts

@@ -11,6 +11,7 @@ import { Subscription } from 'rxjs';
 import { JssState } from '../../JssState';
 import { JssMetaService } from '../../jss-meta.service';
 import { JssLinkService } from '../../jss-link.service';
+import { environment as env } from '../../../environments/environment';
 
 enum LayoutState {
   Layout,
@@ -20,7 +21,7 @@ enum LayoutState {
 
 interface RouteFields {
   [name: string]: unknown;
-  pageTitle: Field<string>;
+  pageTitle?: Field<string>;
 }
 
 @Component({
@@ -43,53 +44,45 @@ export class LayoutComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     // route data is populated by the JssRouteResolver
-    this.subscription = this.activatedRoute.data.subscribe(
-      (data: { jssState: JssState<RouteFields> }) => {
-        if (!data.jssState) {
-          this.state = LayoutState.NotFound;
-          return;
-        }
-
-        if (data.jssState.sitecore && data.jssState.sitecore.route) {
-          this.route = data.jssState.sitecore.route;
-          this.setMetadata(this.route.fields);
-          this.state = LayoutState.Layout;
-          this.mainClassPageEditing = data.jssState.sitecore.context.pageEditing
-            ? 'editing-mode'
-            : 'prod-mode';
+    this.subscription = this.activatedRoute.data.subscribe((data: { jssState: JssState }) => {
+      if (!data.jssState) {
+        this.state = LayoutState.NotFound;
+        return;
+      }
 
-          /**  TODO: get contextId and edgeUrl properly **/
-          const sitecoreEdgeContextId = '';
-          const sitecoreEdgeUrl = '';
-          const contentStyles = getContentStylesheetLink(
-            { sitecore: data.jssState.sitecore },
-            sitecoreEdgeContextId,
-            sitecoreEdgeUrl
-          );
+      if (data.jssState.sitecore && data.jssState.sitecore.route) {
+        this.route = data.jssState.sitecore.route;
+        this.setMetadata(this.route.fields);
+        this.state = LayoutState.Layout;
+        this.mainClassPageEditing = data.jssState.sitecore.context.pageEditing
+          ? 'editing-mode'
+          : 'prod-mode';
 
-          // Clear existing stylesheets
-          this.linkService.removeLinksByRel('stylesheet');
+        const contentStyles = getContentStylesheetLink(
+          { sitecore: data.jssState.sitecore },
+          env.sitecoreEdgeContextId,
+          env.sitecoreEdgeUrl
+        );
 
-          if (contentStyles) {
-            this.linkService.addHeadLinks(contentStyles);
-          }
+        if (contentStyles) {
+          this.linkService.addHeadLinks(contentStyles);
         }
+      }
 
-        if (data.jssState.routeFetchError) {
-          if (
-            data.jssState.routeFetchError.status >= 400 &&
-            data.jssState.routeFetchError.status < 500
-          ) {
-            this.state = LayoutState.NotFound;
-          } else {
-            this.state = LayoutState.Error;
-          }
-
-          this.errorContextData =
-            data.jssState.routeFetchError.data && data.jssState.routeFetchError.data.sitecore;
+      if (data.jssState.routeFetchError) {
+        if (
+          data.jssState.routeFetchError.status >= 400 &&
+          data.jssState.routeFetchError.status < 500
+        ) {
+          this.state = LayoutState.NotFound;
+        } else {
+          this.state = LayoutState.Error;
         }
+
+        this.errorContextData =
+          data.jssState.routeFetchError.data && data.jssState.routeFetchError.data.sitecore;
       }
-    );
+    });
   }
 
   ngOnDestroy() {
@@ -104,7 +97,7 @@ export class LayoutComponent implements OnInit, OnDestroy {
     }
   }
 
-  onMainPlaceholderLoaded(_placeholderName: string) {
+  onPlaceholderLoaded(_placeholderName: string) {
     // you may optionally hook to the loaded event for a placeholder,
     // which can be useful for analytics and other DOM-based things that need to know when a placeholder's content is available.
   }

package/dist/templates/nextjs/scripts/config/plugins/fallback.ts

@@ -13,7 +13,6 @@ class FallbackPlugin implements ConfigPlugin {
   async exec(config: JssConfig) {
     return Object.assign({}, config, {
       defaultLanguage: config.defaultLanguage || 'en',
-      sitecoreApiKey: config.sitecoreApiKey || 'no-api-key-set',
       layoutServiceConfigurationName: config.layoutServiceConfigurationName || 'default',
       publicUrl: config.publicUrl || getPublicUrl(),
     });

package/dist/templates/nextjs/scripts/generate-config.ts

@@ -29,6 +29,11 @@ generateConfig(defaultConfig);
  * @param {JssConfig} defaultConfig Default configuration.
  */
 function generateConfig(defaultConfig: JssConfig): void {
+  // Handle undefined values
+  Object.keys(defaultConfig).forEach(prop => {
+    defaultConfig[prop] = defaultConfig[prop] || '';
+  }, {});
+
   jssConfigFactory
     .create(defaultConfig)
     .then(config => {
@@ -53,7 +58,9 @@ const config = {};\n`;
 
   // Set configuration values, allowing override with environment variables
   Object.keys(config).forEach(prop => {
-    configText += `config.${prop} = process.env.${constantCase(prop)} || '${config[prop]?.trim()}';\n`;
+    // Handle undefined values
+    const value = config[prop] || '';
+    configText += `config.${prop} = process.env.${constantCase(prop)} || '${value.trim()}';\n`;
   });
 
   configText += `module.exports = config;`;

package/dist/templates/nextjs-styleguide/scripts/config/plugins/disconnected.ts

@@ -29,6 +29,7 @@ class DisconnectedPlugin implements ConfigPlugin {
 
     return Object.assign({}, config, {
       sitecoreApiHost: `http://localhost:${port}`,
+      sitecoreApiKey: config.sitecoreApiKey || 'no-api-key-set',
     });
   }
 }

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

@@ -1,6 +1,6 @@
 {
   "name": "node-xmcloud-sample",
-  "version": "22.1.0-canary",
+  "version": "22.2.0-canary",
   "description": "Node XM Cloud Proxy sample for running XM Cloud JSS SPA apps",
   "author": {
     "name": "Sitecore Corporation",
@@ -16,7 +16,7 @@
     "http-proxy-middleware": "^3.0.0"
   },
   "devDependencies": {
-    "@sitecore-jss/sitecore-jss": "~22.1.0-canary",
+    "@sitecore-jss/sitecore-jss": "~22.2.0-canary",
     "@types/compression": "^1.7.2",
     "@types/express": "^4.17.17",
     "ts-node": "^10.9.1",

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

@@ -3,7 +3,7 @@ import { Config, ServerBundle } from './types';
 /**
  * The server.bundle.js file from your pre-built SPA app.
  */
-const bundlePath = process.env.PROXY_BUNDLE_PATH || `../dist/server.bundle`;
+const bundlePath = process.env.PROXY_BUNDLE_PATH || '../dist/server.bundle';
 
 const serverBundle: ServerBundle = require(bundlePath);
 

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

@@ -21,12 +21,11 @@ const requiredProperties = [
   'renderView',
   'parseRouteUrl',
   'clientFactory',
+  'getClientFactoryConfig',
   'siteName',
   'defaultLanguage',
   'layoutServiceFactory',
   'dictionaryServiceFactory',
-  'graphQLEndpointPath',
-  'graphQLEndpoint',
 ];
 
 const missingProperties = requiredProperties.filter((property) => !config.serverBundle[property]);
@@ -39,6 +38,31 @@ if (missingProperties.length > 0) {
   );
 }
 
+/**
+ * GraphQL endpoint resolution to meet the requirements of the http-proxy-middleware
+ */
+const graphQLEndpoint = (() => {
+  const clientFactoryConfig = config.serverBundle.getClientFactoryConfig();
+
+  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.'
+    );
+  }
+})();
+
 const layoutService = layoutServiceFactory.create();
 
 const dictionaryService = dictionaryServiceFactory.create();
@@ -94,9 +118,9 @@ server.use(
  * Proxy browser GraphQL requests to the Sitecore GraphQL endpoint
  */
 server.use(
-  config.serverBundle.graphQLEndpointPath,
+  graphQLEndpoint.path,
   createProxyMiddleware({
-    target: config.serverBundle.graphQLEndpoint,
+    target: graphQLEndpoint.target,
     changeOrigin: true,
   })
 );

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

@@ -1,4 +1,7 @@
-import { GraphQLRequestClientFactory } from '@sitecore-jss/sitecore-jss';
+import {
+  GraphQLRequestClientFactory,
+  GraphQLRequestClientFactoryConfig,
+} from '@sitecore-jss/sitecore-jss';
 import { DictionaryService } from '@sitecore-jss/sitecore-jss/i18n';
 import { LayoutService, LayoutServiceData } from '@sitecore-jss/sitecore-jss/layout';
 
@@ -44,12 +47,11 @@ export interface ServerBundle {
   renderView: AppRenderer;
   parseRouteUrl: RouteUrlParser;
   clientFactory: GraphQLRequestClientFactory;
+  getClientFactoryConfig: () => GraphQLRequestClientFactoryConfig;
   siteName: string;
   defaultLanguage: string;
   layoutServiceFactory: { create: () => LayoutService };
   dictionaryServiceFactory: { create: () => DictionaryService };
-  graphQLEndpointPath: string;
-  graphQLEndpoint: string;
 }
 
 export interface Config {

package/dist/templates/react/scripts/generate-config.js

@@ -31,6 +31,11 @@ generateConfig();
  * NOTE! Any configs returned here will be written into the client-side JS bundle. DO NOT PUT SECRETS HERE.
  */
 function generateConfig() {
+  // Handle undefined values
+  Object.keys(defaultConfig).forEach((prop) => {
+    defaultConfig[prop] = defaultConfig[prop] || '';
+  });
+
   try {
     config = jssConfigFactory.create(defaultConfig);
   } catch (error) {
@@ -50,9 +55,11 @@ const config = {};\n`;
 
   // Set base configuration values, allowing override with environment variables
   Object.keys(config).forEach(prop => {
-    configText += `config.${prop} = process.env.REACT_APP_${constantCase(prop)} || "${
-      config[prop]?.trim()
-    }";\n`;
+    // Handle undefined values
+    const value = config[prop] || '';
+    configText += `config.${prop} = process.env.REACT_APP_${constantCase(
+      prop
+    )} || "${value.trim()}";\n`;
   });
   configText += 'module.exports = config;';
 

package/dist/templates/vue/scripts/generate-config.js

@@ -33,6 +33,11 @@ module.exports = function generateConfig(configOverrides) {
   // and finally config passed in the configOverrides param wins.
   const config = Object.assign(defaultConfig, scjssConfig, packageJson, configOverrides);
 
+  // Handle undefined values
+  Object.keys(config).forEach((prop) => {
+    config[prop] = config[prop] || '';
+  });
+
   // The GraphQL endpoint is an example of making a _computed_ config setting
   // based on other config settings.
   const computedConfig = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.2.0-canary.10",
+  "version": "22.2.0-canary.12",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -63,5 +63,5 @@
     "ts-node": "^10.9.1",
     "typescript": "~4.9.5"
   },
-  "gitHead": "d5b46f1661d99e8936746e964dc3c2ecd61b9e05"
+  "gitHead": "64712384661c6bf2379a610df10c259cd709299e"
 }

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

@@ -1,28 +0,0 @@
-import {
-  GraphQLRequestClientFactoryConfig,
-  GraphQLRequestClient,
-} from '@sitecore-jss/sitecore-jss-angular';
-import { environment as env } from '../../environments/environment';
-
-// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application
-
-/**
- * Creates a new GraphQLRequestClientFactory instance
- * @returns GraphQLRequestClientFactory instance
- */
-export const createGraphQLClientFactory = () => {
-  let clientConfig: GraphQLRequestClientFactoryConfig;
-
-  if (env.graphQLEndpoint && env.sitecoreApiKey) {
-    clientConfig = {
-      endpoint: env.graphQLEndpoint,
-      apiKey: env.sitecoreApiKey,
-    };
-  } else {
-    throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.');
-  }
-
-  return GraphQLRequestClient.createClientFactory(clientConfig);
-};
-
-export const clientFactory = createGraphQLClientFactory();

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

@@ -1,44 +0,0 @@
-import {
-  GraphQLRequestClientFactoryConfig,
-  GraphQLRequestClient,
-} from '@sitecore-jss/sitecore-jss-angular';
-import { environment as env } from '../../environments/environment';
-
-// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application
-
-/**
- * Creates a new GraphQLRequestClientFactory instance
- * @returns GraphQLRequestClientFactory instance
- */
-export const createGraphQLClientFactory = () => {
-  let clientConfig: GraphQLRequestClientFactoryConfig;
-
-  // If we are in a production environment we are going to use Node XM Cloud proxy
-  if (env.production === 'true') {
-    if (env.proxyHost && env.sitecoreApiKey && env.graphQLEndpoint) {
-      // Server side requests should go directly to the Sitecore, browser requests should go through the proxy.
-      clientConfig = {
-        endpoint:
-          typeof window === 'undefined'
-            ? env.graphQLEndpoint
-            : `${env.proxyHost}${env.graphQLEndpointPath}`,
-        apiKey: env.sitecoreApiKey,
-      };
-    } else {
-      throw new Error('Please configure your proxyHost, sitecoreApiKey, graphQLEndpoint.');
-    }
-  } else {
-    if (env.graphQLEndpoint && env.sitecoreApiKey) {
-      clientConfig = {
-        endpoint: env.graphQLEndpoint,
-        apiKey: env.sitecoreApiKey,
-      };
-    } else {
-      throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.');
-    }
-  }
-
-  return GraphQLRequestClient.createClientFactory(clientConfig);
-};
-
-export const clientFactory = createGraphQLClientFactory();