[FEAAS] Load environment-specific FEAAS stylesheets based on Sitecore Edge Platform URL

CHANGELOG.md

@@ -21,6 +21,7 @@ Our versioning strategy is as follows:
 * `[templates/nextjs]` Enable client-only BYOC component imports. Client-only components can be imported through src/byoc/index.client.ts. Hybrid (server render with client hydration) components can be imported through src/byoc/index.hybrid.ts. BYOC scaffold logic is also moved from nextjs-sxa addon into base template ([#1628](https://github.com/Sitecore/jss/pull/1628)[#1636](https://github.com/Sitecore/jss/pull/1636))
 * `[templates/nextjs]` Import SitecoreForm component into sample nextjs app ([#1628](https://github.com/Sitecore/jss/pull/1628))
 * `[sitecore-jss-nextjs]` (Vercel/Sitecore) Deployment Protection Bypass support for editing integration. ([#1634](https://github.com/Sitecore/jss/pull/1634))
+* `[sitecore-jss]` `[templates/nextjs]` Load environment-specific FEAAS theme stylesheets based on Sitecore Edge Platform URL ([#1645](https://github.com/Sitecore/jss/pull/1645))
 
 ### 🐛 Bug Fixes
 

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/lib/page-props-factory/plugins/feaas-themes.ts → packages/create-sitecore-jss/src/templates/nextjs/src/lib/page-props-factory/plugins/feaas-themes.ts

@@ -1,13 +1,14 @@
 import { SitecorePageProps } from 'lib/page-props';
 import { getFEAASLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss-nextjs';
 import { Plugin } from '..';
+import config from 'temp/config';
 
 class FEeaSThemesPlugin implements Plugin {
   order = 2;
 
   async exec(props: SitecorePageProps) {
     // Collect FEAAS themes
-    props.headLinks.push(...getFEAASLibraryStylesheetLinks(props.layoutData));
+    props.headLinks.push(...getFEAASLibraryStylesheetLinks(props.layoutData, config.sitecoreEdgeUrl));
 
     return props;
   }

packages/sitecore-jss/src/constants.ts

@@ -17,3 +17,5 @@ export const JSS_MODE = {
 };
 
 export const siteNameError = 'The siteName cannot be empty';
+
+export const SITECORE_EDGE_URL_DEFAULT = 'https://edge-platform.sitecorecloud.io';

packages/sitecore-jss/src/feaas/themes.test.ts

@@ -1,8 +1,15 @@
 import { expect } from 'chai';
-import { FEAAS_SERVER_URL, getFEAASLibraryStylesheetLinks, getStylesheetUrl } from './themes';
+import {
+  FEAAS_SERVER_URL_STAGING,
+  FEAAS_SERVER_URL_BETA,
+  FEAAS_SERVER_URL_PROD,
+  getFEAASLibraryStylesheetLinks,
+  getStylesheetUrl,
+} from './themes';
+import { SITECORE_EDGE_URL_DEFAULT } from '../constants';
 import { ComponentRendering, HtmlElementRendering, LayoutServicePageState } from '../layout';
 
-describe('utils', () => {
+describe('themes', () => {
   describe('getFEAASLibraryStylesheetLinks', () => {
     const setBasicLayoutData = (
       component: ComponentRendering | HtmlElementRendering,
@@ -153,7 +160,7 @@ describe('utils', () => {
         ).to.deep.equal([{ href: getStylesheetUrl('foo'), rel: 'style' }]);
       });
 
-      it('should return links using custom server url', () => {
+      it('should return links using non-prod server url', () => {
         expect(
           getFEAASLibraryStylesheetLinks(
             setBasicLayoutData({
@@ -164,11 +171,15 @@ describe('utils', () => {
                 },
               },
             }),
-            'https://foo.net'
+            'https://edge-platform-dev.sitecorecloud.io'
           )
         ).to.deep.equal([
           {
-            href: getStylesheetUrl('bar', LayoutServicePageState.Normal, 'https://foo.net'),
+            href: getStylesheetUrl(
+              'bar',
+              LayoutServicePageState.Normal,
+              'https://edge-platform-dev.sitecorecloud.io'
+            ),
             rel: 'style',
           },
         ]);
@@ -345,7 +356,7 @@ describe('utils', () => {
         ]);
       });
 
-      it('should return links using custom server url', () => {
+      it('should return links using non-prod server url', () => {
         expect(
           getFEAASLibraryStylesheetLinks(
             setBasicLayoutData(
@@ -358,12 +369,16 @@ describe('utils', () => {
               },
               LayoutServicePageState.Edit
             ),
-            'https://foo.net'
+            'https://edge-platform-dev.sitecorecloud.io'
           )
         ).to.deep.equal([
           {
             rel: 'style',
-            href: getStylesheetUrl('bar', LayoutServicePageState.Edit, 'https://foo.net'),
+            href: getStylesheetUrl(
+              'bar',
+              LayoutServicePageState.Edit,
+              'https://edge-platform-dev.sitecorecloud.io'
+            ),
           },
         ]);
       });
@@ -450,35 +465,61 @@ describe('utils', () => {
     });
 
     describe('getStylesheetUrl', () => {
-      it('should return stylesheet url using default server url', () => {
+      it('should use published css url in Normal mode', () => {
         const pageState = LayoutServicePageState.Normal;
 
         expect(getStylesheetUrl('foo', pageState)).to.equal(
-          `${FEAAS_SERVER_URL}/styles/foo/published.css`
+          `${FEAAS_SERVER_URL_PROD}/styles/foo/published.css`
         );
       });
 
-      it('should return stylesheet url using default server url in Edit mode', () => {
+      it('should use staged css url in Edit mode', () => {
         const pageState = LayoutServicePageState.Edit;
 
         expect(getStylesheetUrl('foo', pageState)).to.equal(
-          `${FEAAS_SERVER_URL}/styles/foo/staged.css`
+          `${FEAAS_SERVER_URL_PROD}/styles/foo/staged.css`
         );
       });
 
-      it('should return stylesheet url using default server url in Preview mode', () => {
+      it('should use staged css url in Preview mode', () => {
         const pageState = LayoutServicePageState.Preview;
 
         expect(getStylesheetUrl('foo', pageState)).to.equal(
-          `${FEAAS_SERVER_URL}/styles/foo/staged.css`
+          `${FEAAS_SERVER_URL_PROD}/styles/foo/staged.css`
         );
       });
 
-      it('should return stylesheet url using custom server url', () => {
+      ['dev', 'qa', 'staging'].map((env) => {
+        it(`should use staging server url for edge ${env} url`, () => {
+          const pageState = LayoutServicePageState.Normal;
+
+          expect(
+            getStylesheetUrl(
+              'foo',
+              pageState,
+              `https://edge-platform-${env}.sitecore-staging.cloud`
+            )
+          ).to.equal(`${FEAAS_SERVER_URL_STAGING}/styles/foo/published.css`);
+        });
+      });
+
+      it('should use beta server url for edge preprod url', () => {
+        const pageState = LayoutServicePageState.Normal;
+
+        expect(
+          getStylesheetUrl(
+            'foo',
+            pageState,
+            'https://edge-platform-pre-production.sitecorecloud.io'
+          )
+        ).to.equal(`${FEAAS_SERVER_URL_BETA}/styles/foo/published.css`);
+      });
+
+      it('should use prod server url for edge prod url', () => {
         const pageState = LayoutServicePageState.Normal;
 
-        expect(getStylesheetUrl('foo', pageState, 'https://bar.net')).to.equal(
-          'https://bar.net/styles/foo/published.css'
+        expect(getStylesheetUrl('foo', pageState, SITECORE_EDGE_URL_DEFAULT)).to.equal(
+          `${FEAAS_SERVER_URL_PROD}/styles/foo/published.css`
         );
       });
     });

packages/sitecore-jss/src/feaas/themes.ts

@@ -7,6 +7,7 @@ import {
   getFieldValue,
 } from '../layout';
 import { HTMLLink } from '../models';
+import { SITECORE_EDGE_URL_DEFAULT } from '../constants';
 
 /**
  * Stylesheets revision type
@@ -21,17 +22,19 @@ type RevisionType = 'staged' | 'published';
  */
 const FEAAS_LIBRARY_ID_REGEX = /-library--([^\s]+)/;
 
-export const FEAAS_SERVER_URL = 'https://feaas.blob.core.windows.net';
+export const FEAAS_SERVER_URL_STAGING = 'https://feaasstaging.blob.core.windows.net';
+export const FEAAS_SERVER_URL_BETA = 'https://feaasbeta.blob.core.windows.net';
+export const FEAAS_SERVER_URL_PROD = 'https://feaas.blob.core.windows.net';
 
 /**
  * Walks through rendering tree and returns list of links of all FEAAS Component Library Stylesheets that are used
  * @param {LayoutServiceData} layoutData Layout service data
- * @param {string} [serverUrl] server URL, default is @see {FEAAS_SERVER_URL} url
+ * @param {string} [sitecoreEdgeUrl] Sitecore Edge Platform URL. Default is https://edge-platform.sitecorecloud.io
  * @returns {HTMLLink[]} library stylesheet links
  */
 export function getFEAASLibraryStylesheetLinks(
   layoutData: LayoutServiceData,
-  serverUrl?: string
+  sitecoreEdgeUrl = SITECORE_EDGE_URL_DEFAULT
 ): HTMLLink[] {
   const ids = new Set<string>();
 
@@ -40,20 +43,30 @@ export function getFEAASLibraryStylesheetLinks(
   traverseComponent(layoutData.sitecore.route, ids);
 
   return [...ids].map((id) => ({
-    href: getStylesheetUrl(id, layoutData.sitecore.context.pageState, serverUrl),
+    href: getStylesheetUrl(id, layoutData.sitecore.context.pageState, sitecoreEdgeUrl),
     rel: 'style',
   }));
 }
 
 export const getStylesheetUrl = (
   id: string,
   pageState?: LayoutServicePageState,
-  serverUrl?: string
+  sitecoreEdgeUrl = SITECORE_EDGE_URL_DEFAULT
 ) => {
   const revision: RevisionType =
     pageState && pageState !== LayoutServicePageState.Normal ? 'staged' : 'published';
 
-  return `${serverUrl || FEAAS_SERVER_URL}/styles/${id}/${revision}.css`;
+  let serverUrl = FEAAS_SERVER_URL_PROD;
+  if (
+    sitecoreEdgeUrl.toLowerCase().includes('edge-platform-dev') ||
+    sitecoreEdgeUrl.toLowerCase().includes('edge-platform-qa') ||
+    sitecoreEdgeUrl.toLowerCase().includes('edge-platform-staging')
+  ) {
+    serverUrl = FEAAS_SERVER_URL_STAGING;
+  } else if (sitecoreEdgeUrl.toLowerCase().includes('edge-platform-pre-production')) {
+    serverUrl = FEAAS_SERVER_URL_BETA;
+  }
+  return `${serverUrl}/styles/${id}/${revision}.css`;
 };
 
 /**

packages/sitecore-jss/src/graphql/graphql-edge-proxy.test.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-unused-expressions */
 import { expect } from 'chai';
 import { getEdgeProxyContentUrl } from './graphql-edge-proxy';
+import { SITECORE_EDGE_URL_DEFAULT } from '../constants';
 
 describe('graphql-edge-proxy', () => {
   describe('getEdgeProxyContentUrl', () => {
@@ -10,7 +11,7 @@ describe('graphql-edge-proxy', () => {
       const url = getEdgeProxyContentUrl(sitecoreEdgeContextId);
 
       expect(url).to.equal(
-        'https://edge-platform.sitecorecloud.io/content/api/graphql/v1?sitecoreContextId=0730fc5a-3333-5555-5555-08db6d7ddb49'
+        `${SITECORE_EDGE_URL_DEFAULT}/content/api/graphql/v1?sitecoreContextId=0730fc5a-3333-5555-5555-08db6d7ddb49`
       );
     });
 

packages/sitecore-jss/src/graphql/graphql-edge-proxy.ts

@@ -1,3 +1,5 @@
+import { SITECORE_EDGE_URL_DEFAULT } from '../constants';
+
 /**
  * Generates a URL for accessing Sitecore Edge Platform Content using the provided endpoint and context ID.
  * @param {string} sitecoreEdgeContextId - The unique context id.
@@ -6,5 +8,5 @@
  */
 export const getEdgeProxyContentUrl = (
   sitecoreEdgeContextId: string,
-  sitecoreEdgeUrl = 'https://edge-platform.sitecorecloud.io'
+  sitecoreEdgeUrl = SITECORE_EDGE_URL_DEFAULT
 ) => `${sitecoreEdgeUrl}/content/api/graphql/v1?sitecoreContextId=${sitecoreEdgeContextId}`;