[angular][xmcloud] Init CloudSDK on browser

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cloud-sdk-init.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { CloudSDK } from '@sitecore-cloudsdk/core/browser';
+import { environment } from '../../../environments/environment';
+import { isServer } from '@sitecore-jss/sitecore-jss/utils';
+
+/**
+ * Component that renders editing scripts and client data for the current page in Sitecore Editor.
+ * Only renders scripts when Metadata mode is used.
+ */
+@Component({
+  selector: 'app-cloudsdk-init',
+  template: '',
+})
+export class CloudSdkInitComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {
+    if (!isServer) {
+      CloudSDK({
+        siteName: environment.sitecoreSiteName,
+        sitecoreEdgeUrl: environment.sitecoreEdgeUrl,
+        sitecoreEdgeContextId: environment.sitecoreEdgeContextId,
+        // Replace with the top level cookie domain of the website that is being integrated e.g ".example.com" and not "www.example.com"
+        cookieDomain: window.location.hostname.replace(/^www\./, ''),
+        // Cookie may be created in personalize middleware (server), but if not we should create it here
+        enableBrowserCookie: true,
+      }).initialize();
+    }
+  }
+}

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.component.html

@@ -1,3 +1,4 @@
 <ng-container>
   <sc-editing-scripts></sc-editing-scripts>
+  <app-cloudsdk-init></app-cloudsdk-init>
 </ng-container>

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.module.ts

@@ -1,10 +1,11 @@
 import { NgModule } from '@angular/core';
 import { ScriptsComponent } from './scripts.component';
 import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
+import { CloudSdkInitComponent } from './cloud-sdk-init.component';
 
 @NgModule({
   exports: [ScriptsComponent],
   imports: [JssModule],
-  declarations: [ScriptsComponent],
+  declarations: [ScriptsComponent, CloudSdkInitComponent],
 })
 export class ScriptsModule {}

packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json

@@ -1,7 +1,8 @@
 {
   "dependencies": {
     "@sitecore/components": "^1.1.10",
-    "@sitecore-cloudsdk/events": "^0.3.1",
+    "@sitecore-cloudsdk/core": "^0.4.0-rc.0",
+    "@sitecore-cloudsdk/events": "^0.4.0-rc.0",
     "@sitecore-feaas/clientside": "^0.5.17"
   }
 }