[Angular XMC Proxy] Extract SXP related things from the base Angular template

CHANGELOG.md

@@ -15,9 +15,13 @@ Our versioning strategy is as follows:
 
 ### 🎉 New Features & Improvements
 
-### 🛠 Breaking Change
+* `[create-sitecore-jss]` `[template/angular]` `[template/angular-sxp]` `[template/angular-xmcloud]` Introduced "angular-sxp", "angular-xmcloud" addons ([#1838](https://github.com/Sitecore/jss/pull/1838))([#1845](https://github.com/Sitecore/jss/pull/1845)):
+    * The Angular app should now be initialized by providing both templates (or using CLI prompts): 
+      * SXP-based: 'angular,angular-sxp'
+      * XMCloud-based: 'angular,angular-xmcloud'
+    * Rework Angular initializer to support XMCloud and SXP journeys;
 
-* `[create-sitecore-jss]` Rework Angular initializer to support XMCloud and SXP journeys ([#1845](https://github.com/Sitecore/jss/pull/1845))
+### 🛠 Breaking Change
 
 ### 🧹 Chores
 
@@ -36,6 +40,7 @@ Our versioning strategy is as follows:
 * `[sitecore-jss]` _GraphQLRequestClient_ now can accept custom 'headers' in the constructor or via _createClientFactory_ ([#1806](https://github.com/Sitecore/jss/pull/1806))
 * `[templates/nextjs]` Removed cors header for API endpoints from _lib/next-config/plugins/cors-header_ plugin since cors is handled by API handlers / middlewares ([#1806](https://github.com/Sitecore/jss/pull/1806))
 * `[sitecore-jss-nextjs]` Updates to Next.js editing integration to further support secure hosting scenarios (on XM Cloud & Vercel) ([#1832](https://github.com/Sitecore/jss/pull/1832))
+* `[create-sitecore-jss]` `[template/angular]` `[template/angular-sxp]` Extracts all SXP related code from the base Angular template into a new 'angular-sxp' addon template. The regular Angular app should now be initialized by providing both templates: 'angular,angular-sxp' ([#1838](https://github.com/Sitecore/jss/pull/1838))
 
 ### 🛠 Breaking Change
 

packages/create-sitecore-jss/src/initializers/angular-sxp/index.ts

@@ -1,15 +1,34 @@
-import { ClientAppArgs, DEFAULT_APPNAME, Initializer } from '../../common';
+import path, { sep } from 'path';
+import {
+  Initializer,
+  openPackageJson,
+  transform,
+  DEFAULT_APPNAME,
+  ClientAppArgs,
+} from '../../common';
 import { InitializerResults } from '../../common/Initializer';
 
-export default class AngularXmCloudInitializer implements Initializer {
+export default class AngularSxpInitializer implements Initializer {
   get isBase(): boolean {
     return false;
   }
 
   async init(args: ClientAppArgs) {
+    const pkg = openPackageJson(`${args.destination}${sep}package.json`);
+
+    const mergedArgs = {
+      ...args,
+      appName: args.appName || pkg?.config?.appName || DEFAULT_APPNAME,
+      appPrefix: args.appPrefix || pkg?.config?.prefix || false,
+    };
+
+    const templatePath = path.resolve(__dirname, '../../templates/angular-sxp');
+
+    await transform(templatePath, mergedArgs);
+
     const response: InitializerResults = {
       nextSteps: [],
-      appName: args.appName || DEFAULT_APPNAME,
+      appName: mergedArgs.appName,
     };
 
     return response;

packages/create-sitecore-jss/src/templates/angular-sxp/package.json

@@ -0,0 +1,12 @@
+{
+  "scripts": {
+    "start": "cross-env-shell JSS_MODE=disconnected \"npm-run-all --serial bootstrap --parallel start:angular start:proxy start:watch-components\"",
+    "start:proxy": "ts-node --project src/tsconfig.webpack-server.json scripts/disconnected-mode-proxy.ts",
+    "lint:yml": "ts-node ./scripts/lint-yml.ts",
+    "lint": "ng lint <%- appName %> --fix && npm run lint:yml",
+    "scaffold": "ng generate @sitecore-jss/sitecore-jss-angular-schematics:jss-component"
+  },
+  "devDependencies": {
+    "yaml-lint": "^1.2.4"
+  }
+}

packages/create-sitecore-jss/src/templates/angular-sxp/proxy.conf.js

@@ -0,0 +1,43 @@
+/*
+  When the app runs in disconnected mode, and Sitecore is not present, we need to give
+  the app copies of the Sitecore APIs it depends on (layout service, dictionary service, content service)
+  to talk to so that the app can run using the locally defined disconnected data.
+
+  When the app runs in connected mode, Sitecore is present and some of the requests should be
+  proxied to the Sitecore API
+
+  This is accomplished by spinning up a small Express server that mocks the APIs, and then
+  telling angular-cli to proxy requests to the API paths to this express instance.
+
+*/
+const constants = require('@sitecore-jss/sitecore-jss-angular/cjs').constants;
+const environment = require('./src/environments/environment.js').environment;
+
+const port = 3043;
+
+const PROXY_CONFIG =
+  process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED
+    ? [
+        {
+          context: ['/data', '/sitecore'],
+          target: `http://localhost:${port}`,
+          secure: false,
+        },
+      ]
+    : [
+        {
+          context: [
+            // API endpoints
+            '/sitecore',
+            // media items
+            '/-',
+            // visitor identification
+            '/layouts',
+          ],
+          target: environment.sitecoreApiHost,
+          secure: false,
+          changeOrigin: true,
+        },
+      ];
+
+module.exports = PROXY_CONFIG;

packages/create-sitecore-jss/src/templates/angular-sxp/scripts/config/plugins/disconnected.ts

@@ -0,0 +1,27 @@
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
+import { constants } from '@sitecore-jss/sitecore-jss-angular/cjs';
+const chalk = require('chalk');
+
+/**
+ * This plugin will check if fetchwith graphgl is beeing used in disconnected mode and throw error if so
+ */
+class DisconnectedPlugin implements ConfigPlugin {
+  // should come before other plugins
+  order = 0;
+
+  async exec(config: JssConfig) {
+    const disconnected = process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED;
+    if (disconnected && process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL) {
+      throw new Error(
+        chalk.red(
+          'GraphQL requests to Dictionary and Layout services are not supported in disconnected mode.'
+        )
+      );
+    }
+
+    return config;
+  }
+}
+
+export const disconnectedPlugin = new DisconnectedPlugin();

packages/create-sitecore-jss/src/templates/angular-sxp/src/app/components/app-components.shared.module.ts

@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterModule } from '@angular/router';
+import { StyleguideSpecimenComponent } from './shared/styleguide-specimen/styleguide-specimen.component';
+import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
+
+/*
+  This module is imported by the generated app-components.module.ts.
+  You can use this module to provide shared Angular components that are not
+  JSS components, etc to the generated module.
+
+  Don't want code generation? See ./.gitignore for instructions to turn it off.
+*/
+@NgModule({
+  imports: [
+    CommonModule,
+    TranslateModule,
+    RouterModule,
+    JssModule,
+    FormsModule,
+  ],
+  exports: [
+    CommonModule,
+    TranslateModule,
+    RouterModule,
+    FormsModule,
+    StyleguideSpecimenComponent
+  ],
+  declarations: [
+    StyleguideSpecimenComponent
+  ],
+})
+export class AppComponentsSharedModule { }

packages/create-sitecore-jss/src/templates/angular/src/app/jss-data-fetcher.service.ts → packages/create-sitecore-jss/src/templates/angular-sxp/src/app/jss-data-fetcher.service.ts

@@ -3,7 +3,9 @@ import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { HttpResponse } from '@sitecore-jss/sitecore-jss-angular';
 import { Observable, lastValueFrom } from 'rxjs';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class JssDataFetcherService {
   constructor(
     private readonly httpClient: HttpClient,

packages/create-sitecore-jss/src/templates/angular-sxp/src/app/routing/navigation/navigation.component.html

@@ -0,0 +1,23 @@
+<div
+  class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom"
+>
+  <h5 class="my-0 me-md-auto fw-normal">
+    <a routerLink="/" class="text-dark" class="logo"></a>
+  </h5>
+  <nav class="my-2 my-md-0 me-md-3">
+    <a
+      class="p-2 text-dark"
+      href="https://jss.sitecore.com"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {{ 'Documentation' | translate }}
+    </a>
+    <a routerLink="/styleguide" class="p-2 text-dark">
+      {{ 'Styleguide' | translate }}
+    </a>
+    <a routerLink="/graphql" class="p-2 text-dark">
+      {{ 'GraphQL' | translate }}
+    </a>
+  </nav>
+</div>

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

@@ -0,0 +1,3 @@
+<div>
+  <app-visitor-identification></app-visitor-identification>
+</div>

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

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { ScriptsComponent } from './scripts.component';
+import { VisitorIdentificationComponent } from './visitor-identification/visitor-identification.component';
+
+@NgModule({
+  exports: [ScriptsComponent],
+  declarations: [ScriptsComponent, VisitorIdentificationComponent],
+})
+export class ScriptsModule {}

packages/create-sitecore-jss/src/templates/angular/src/app/routing/visitor-identification/visitor-identification.component.ts → packages/create-sitecore-jss/src/templates/angular-sxp/src/app/routing/scripts/visitor-identification/visitor-identification.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { JssContextService } from '../../jss-context.service';
+import { JssContextService } from '../../../jss-context.service';
 
 let emittedVI = false;
 
@@ -13,15 +13,21 @@ let emittedVI = false;
  */
 @Component({
   selector: 'app-visitor-identification',
-  template: `<meta *ngIf="visitorIdentificationTimestamp" name="VIcurrentDateTime" [content]="visitorIdentificationTimestamp" />`,
+  template: `
+    <meta
+      *ngIf="visitorIdentificationTimestamp"
+      name="VIcurrentDateTime"
+      [content]="visitorIdentificationTimestamp"
+    />
+  `,
 })
 export class VisitorIdentificationComponent implements OnInit, OnDestroy {
   visitorIdentificationTimestamp: number;
 
   private contextSubscription: Subscription;
 
   // inject the JssContextService, which maintains the current Sitecore Context
-  constructor(private jssContext: JssContextService) { }
+  constructor(private jssContext: JssContextService) {}
 
   ngOnInit() {
     this.contextSubscription = this.jssContext.state.subscribe((state) => {