create-sitecore-jss 22.2.0-canary.2 → 22.2.0-canary.21

package/dist/initializers/nextjs-styleguide-tracking/index.js

@@ -41,7 +41,7 @@ class NextjsStyleguideInitializer {
     init(args) {
         var _a, _b, _c, _d, _e, _f;
         return __awaiter(this, void 0, void 0, function* () {
-            const pkg = (0, common_1.openPackageJson)(`${args.destination}${path_1.sep}package.json`);
+            const pkg = (0, common_1.openJsonFile)(`${args.destination}${path_1.sep}package.json`);
             const mergedArgs = Object.assign(Object.assign({}, args), { appName: args.appName || ((_a = pkg === null || pkg === void 0 ? void 0 : pkg.config) === null || _a === void 0 ? void 0 : _a.appName) || common_1.DEFAULT_APPNAME, appPrefix: args.appPrefix || ((_b = pkg === null || pkg === void 0 ? void 0 : pkg.config) === null || _b === void 0 ? void 0 : _b.prefix) || false });
             const templatePath = path_1.default.resolve(__dirname, '../../templates/nextjs-styleguide-tracking');
             yield (0, common_1.transform)(templatePath, mergedArgs);

package/dist/initializers/nextjs-sxa/index.js

@@ -41,7 +41,7 @@ class NextjsSxaInitializer {
     init(args) {
         var _a, _b, _c, _d;
         return __awaiter(this, void 0, void 0, function* () {
-            const pkg = (0, common_1.openPackageJson)(`${args.destination}${path_1.sep}package.json`);
+            const pkg = (0, common_1.openJsonFile)(`${args.destination}${path_1.sep}package.json`);
             // TODO: prompts for SXA
             // const answers = await prompt<StyleguideAnswer>(styleguidePrompts, args);
             const mergedArgs = Object.assign(Object.assign({}, args), { appName: args.appName || ((_a = pkg === null || pkg === void 0 ? void 0 : pkg.config) === null || _a === void 0 ? void 0 : _a.appName) || common_1.DEFAULT_APPNAME, appPrefix: args.appPrefix || ((_b = pkg === null || pkg === void 0 ? void 0 : pkg.config) === null || _b === void 0 ? void 0 : _b.prefix) || false });

package/dist/initializers/nextjs-xmcloud/index.js

@@ -42,7 +42,7 @@ class NextjsXMCloudInitializer {
     init(args) {
         var _a, _b, _c, _d;
         return __awaiter(this, void 0, void 0, function* () {
-            const pkg = (0, common_1.openPackageJson)(`${args.destination}${path_1.sep}package.json`);
+            const pkg = (0, common_1.openJsonFile)(`${args.destination}${path_1.sep}package.json`);
             const mergedArgs = Object.assign(Object.assign({}, args), { appName: args.appName || ((_a = pkg === null || pkg === void 0 ? void 0 : pkg.config) === null || _a === void 0 ? void 0 : _a.appName) || common_1.DEFAULT_APPNAME, appPrefix: args.appPrefix || ((_b = pkg === null || pkg === void 0 ? void 0 : pkg.config) === null || _b === void 0 ? void 0 : _b.prefix) || false });
             const templatePath = path_1.default.resolve(__dirname, '../../templates/nextjs-xmcloud');
             yield (0, common_1.transform)(templatePath, mergedArgs);

package/dist/initializers/node-xmcloud-proxy/index.js

@@ -21,7 +21,8 @@ class AngularXmCloudInitializer {
     init(args) {
         return __awaiter(this, void 0, void 0, function* () {
             const templatePath = path_1.default.resolve(__dirname, '../../templates/node-xmcloud-proxy');
-            yield (0, common_1.transform)(templatePath, args);
+            const modifiedArgs = Object.assign(Object.assign({}, args), { destination: args.proxyAppDestination || args.destination });
+            yield (0, common_1.transform)(templatePath, modifiedArgs);
             const response = {
                 appName: 'node-xmcloud-proxy',
             };

package/dist/initializers/react/index.js

@@ -52,7 +52,7 @@ class ReactInitializer {
             yield (0, common_1.transform)(templatePath, mergedArgs);
             const isDev = (0, common_1.isDevEnvironment)(args.destination);
             const pkgPath = path_1.default.resolve(`${args.destination}${path_1.sep}package.json`);
-            const pkg = (0, common_1.openPackageJson)(pkgPath);
+            const pkg = (0, common_1.openJsonFile)(pkgPath);
             if (isDev) {
                 Object.entries(pkg.scripts).forEach(([key, value]) => {
                     // Can't rewire `eject` script
@@ -61,14 +61,14 @@ class ReactInitializer {
                     // It's required to start each command using `react-app-rewired`, to solve duplicate `react` issue
                     pkg.scripts[key] = value.replace('react-scripts', 'react-app-rewired');
                 });
-                (0, common_1.writePackageJson)(pkg, pkgPath);
+                (0, common_1.writeJsonFile)(pkg, pkgPath);
             }
             else {
                 // Don't need to rewire anything if we are not in the dev env
                 delete pkg.devDependencies['react-app-rewired'];
                 // Remove webpack overrides
                 (0, common_1.removeFile)(path_1.default.resolve(`${args.destination}${path_1.sep}config-overrides.js`));
-                (0, common_1.writePackageJson)(pkg, pkgPath);
+                (0, common_1.writeJsonFile)(pkg, pkgPath);
             }
             const response = {
                 nextSteps: [`* Connect to Sitecore with ${chalk_1.default.green('jss setup')} (optional)`],

package/dist/initializers/react/prompts.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.prompts = void 0;
 const common_1 = require("../../common");
-exports.prompts = [...common_1.clientAppPrompts, ...common_1.styleguidePrompts];
+exports.prompts = [...common_1.clientAppPrompts, ...common_1.sxpPrompts, ...common_1.styleguidePrompts];

package/dist/initializers/react-native/prompts.js

@@ -4,5 +4,6 @@ exports.prompts = void 0;
 const common_1 = require("../../common");
 exports.prompts = [
     ...common_1.clientAppPrompts.filter((p) => p.name !== 'fetchWith'),
+    ...common_1.sxpPrompts,
     ...common_1.styleguidePrompts,
 ];

package/dist/initializers/vue/prompts.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.prompts = void 0;
 const common_1 = require("../../common");
-exports.prompts = [...common_1.clientAppPrompts, ...common_1.styleguidePrompts];
+exports.prompts = [...common_1.clientAppPrompts, ...common_1.sxpPrompts, ...common_1.styleguidePrompts];

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,15 +19,12 @@ 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=
 
-<% if (!locals.xmcloud) { -%>
-# The way in which layout and dictionary data is fetched from Sitecore
-FETCH_WITH=<%- fetchWith %>
-<% } -%>
-
 # Your default app language.
 DEFAULT_LANGUAGE=
 

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';
@@ -23,8 +24,16 @@ const defaultConfigValue: JssConfig = {
   defaultServerRoute: '/',
 };
 
-generateConfig('src/environments/environment.js', defaultConfigValue, { production: false });
-generateConfig('src/environments/environment.prod.js', defaultConfigValue, { production: true });
+async function main() {
+  await generateConfig('src/environments/environment.js', defaultConfigValue, {
+    production: false,
+  });
+  await generateConfig('src/environments/environment.prod.js', defaultConfigValue, {
+    production: true,
+  });
+}
+
+main();
 
 /**
  * Generates the JSS config based on config plugins (under ./config/plugins)
@@ -38,7 +47,15 @@ export function generateConfig(
   defaultConfig: JssConfig = defaultConfigValue,
   configOverrides?: { [key: string]: unknown }
 ) {
-  jssConfigFactory
+  // Handle undefined values
+  defaultConfig = Object.keys(defaultConfig).reduce((acc, key) => {
+    return {
+      ...acc,
+      [key]: defaultConfig[key] || '',
+    };
+  }, {});
+
+  return jssConfigFactory
     .create(defaultConfig)
     .then((config) => {
       writeConfig(Object.assign(config, configOverrides), outputPath);
@@ -67,9 +84,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,6 @@
-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
@@ -9,28 +9,23 @@ import { generateConfig } from './generate-config';
 //
 // The `jss graphql:update` command should be executed when Sitecore templates related to the site are altered.
 
-generateConfig('src/environments/environment.js');
+import './generate-config';
 
-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 +36,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,15 +1,12 @@
-import {
-  RouteData,
-  LayoutServiceContextData,
-} from '@sitecore-jss/sitecore-jss-angular';
+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/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/.env

@@ -0,0 +1,2 @@
+# The way in which layout and dictionary data is fetched from Sitecore
+FETCH_WITH=<%- fetchWith %>

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,8 +1,14 @@
 
+# ========== 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.
 PROXY_HOST=http://localhost:3001
 
 # 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=<%- proxyAppDestination %>/dist
+PROXY_BUILD_PATH=<%- locals.relativeProxyAppDestination.replace(/\\/g, '\\\\') %>dist

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

@@ -0,0 +1,34 @@
+{
+  "projects": {
+    "<%- appName %>": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "src/styles.css",
+              "src/assets/styles/main.scss"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/assets/styles", "node_modules"]
+            }
+          }
+        },
+        "test": {
+          "options": {
+            "styles": ["src/styles.css", "src/assets/styles/main.scss"],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/assets/styles", "node_modules"]
+            }
+          }
+        }
+      }
+    }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "style": "scss"
+    }
+  }
+}

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

@@ -1,10 +1,15 @@
-{
-  "config": {
-    "sitecoreDistPath": "/dist"
-  },
-  "scripts": {
-    "postbuild:server": "npm-run-all --serial prepare:build prepare:proxy-build",
-    "prepare:build": "move-cli ./dist/main.js ./dist/server.bundle.js",
-    "prepare:proxy-build": "ts-node --project src/tsconfig.webpack-server.json ./scripts/proxy-build.ts"
-  }
-}
+{
+  "config": {
+    "sitecoreDistPath": "/dist"
+  },
+  "scripts": {
+    "postbuild:server": "npm-run-all --serial prepare:build prepare:proxy-build",
+    "prepare:build": "move-cli ./dist/main.js ./dist/server.bundle.js",
+    "prepare:proxy-build": "ts-node --project src/tsconfig.webpack-server.json ./scripts/proxy-build.ts"
+  },
+  "dependencies": {
+    "font-awesome": "^4.7.0",
+    "sass": "^1.52.3",
+    "sass-alias": "^1.0.5"
+  }
+}

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/components/container/container.component.html

@@ -0,0 +1,15 @@
+<div class="container-wrapper" *ngIf="wrapped; else default">
+  <ng-container *ngTemplateOutlet="default"></ng-container>
+</div>
+<ng-template #default>
+  <div class="component container-default {{ styles }}" [attr.id]="id">
+    <div class="component-content" [ngStyle]="backgroundStyle">
+      <div class="row">
+        <sc-placeholder
+          [name]="placeholderName"
+          [rendering]="rendering">
+        </sc-placeholder>
+      </div>
+    </div>
+  </div>
+</ng-template>

package/dist/templates/angular-xmcloud/src/app/components/container/container.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { SxaComponent } from '../sxa.component';
+
+@Component({
+  selector: 'app-container',
+  templateUrl: './container.component.html',
+})
+export class ContainerComponent extends SxaComponent implements OnInit {
+  placeholderName: string;
+  wrapped: boolean;
+
+  override ngOnInit() {
+    super.ngOnInit();
+
+    this.placeholderName = `container-${this.rendering.params?.DynamicPlaceholderId}`;
+    this.wrapped = this.rendering.params?.Styles?.split(' ').includes('container');
+  }
+
+  get backgroundStyle() {
+    const backgroundImage = this.rendering.params?.BackgroundImage;
+    const mediaUrlPattern = new RegExp(/mediaurl=\"([^"]*)\"/, 'i');
+    if (!backgroundImage || !backgroundImage.match(mediaUrlPattern)) {
+      return {};
+    }
+    const mediaUrl = backgroundImage.match(mediaUrlPattern)[1];
+    return {
+      backgroundImage: `url('${mediaUrl}')`,
+    };
+  }
+}

package/dist/templates/angular-xmcloud/src/app/components/richtext/richtext.component.html

@@ -0,0 +1,13 @@
+<div
+  class="component rich-text {{ styles }}"
+  [attr.id]="id"
+>
+  <div class="component-content">
+    <ng-container *ngIf="text; else emptyHint">
+      <div *scRichText="text"></div>
+    </ng-container>
+    <ng-template #emptyHint>
+      <span class="is-empty-hint">Rich text</span>
+    </ng-template>
+  </div>
+</div>