[RAV][node-ssr] Update samples to use SITE_NAME instead of JSS_APP_NAME

CHANGELOG.md

@@ -15,6 +15,7 @@ Our versioning strategy is as follows:
 
 ### 🎉 New Features & Improvements
 
+* `[templates/react]` `[templates/angular]` `[templates/vue]` `[templates/node-headless-ssr-proxy]` `[templates/node-headless-ssr-experience-edge]` ([#1647](https://github.com/Sitecore/jss/pull/1647)) Switch from using JSS_APP_NAME to SITE_NAME - environment and config variables in React, Vue, Angular templates as well as ssr node proxy apps templates have been renamed. 
 * `[sitecore-jss]` Support for both 'published' and 'staged' revisions of FEAAS stylesheets/themes ([#1644](https://github.com/Sitecore/jss/pull/1644))
 * `[templates/nextjs]` `[sitecore-jss-nextjs]` `[sitecore-jss]` ([#1640](https://github.com/Sitecore/jss/pull/1640)) Sitecore Edge Platform and Context support:
   * Introducing the _clientFactory_ property. This property can be utilized by GraphQL-based services, the previously used _endpoint_ and _apiKey_ properties are deprecated. The _clientFactory_ serves as the central hub for executing GraphQL requests within the application.

packages/create-sitecore-jss/src/templates/angular/.env

@@ -17,8 +17,9 @@ SITECORE_API_HOST=
 # the resolved Sitecore API hostname + the `graphQLEndpointPath` defined in your `package.json`.
 GRAPH_QL_ENDPOINT=
 
-# Your JSS app name (also used as the default site name). Overrides 'config.appName' defined in a package.json
-JSS_APP_NAME=
+# Your Sitecore site name.
+# Uses your `package.json` config `appName` if empty.
+SITE_NAME=
 
 # Your default app language.
 DEFAULT_LANGUAGE=

packages/create-sitecore-jss/src/templates/angular/scripts/disconnected-mode-proxy.ts

@@ -9,21 +9,24 @@
 
 import * as fs from 'fs';
 import { join } from 'path';
-import { createDefaultDisconnectedServer, DisconnectedServerOptions } from '@sitecore-jss/sitecore-jss-dev-tools';
+import {
+  createDefaultDisconnectedServer,
+  DisconnectedServerOptions,
+} from '@sitecore-jss/sitecore-jss-dev-tools';
 import { ManifestInstance } from '@sitecore-jss/sitecore-jss-dev-tools';
 import { environment } from '../src/environments/environment';
 
-const config = (environment as {
+const config = environment as {
   [key: string]: unknown;
-  jssAppName: string;
-  defaultLanguage: string
-});
+  siteName: string;
+  defaultLanguage: string;
+};
 
 const touchToReloadFilePath = 'src/environments/environment.js';
 
 const proxyOptions: DisconnectedServerOptions = {
   appRoot: join(__dirname, '..'),
-  appName: config.jssAppName,
+  appName: config.siteName,
   watchPaths: ['./data'],
   language: config.defaultLanguage,
   // Additional transpilation is not needed

packages/create-sitecore-jss/src/templates/angular/scripts/generate-config.ts

@@ -10,12 +10,14 @@ const packageConfig = require('../package.json');
  * settings as variables into the JSS app.
  * NOTE! Any configs returned here will be written into the client-side JS bundle. DO NOT PUT SECRETS HERE.
  */
+// JSS_APP_NAME env variable has been deprecated since v.21.6, SITE_NAME should be used instead
 export function generateConfig(configOverrides?: { [key: string]: unknown }, outputPath?: string) {
   const defaultConfig = {
     production: false,
     sitecoreApiHost: '',
     sitecoreApiKey: 'no-api-key-set',
-    jssAppName: 'Unknown',
+    jssAppName: process.env.JSS_APP_NAME,
+    siteName: process.env.SITE_NAME,
     sitecoreLayoutServiceConfig: 'jss',
     defaultLanguage: 'en',
     defaultServerRoute: '/',
@@ -38,6 +40,9 @@ export function generateConfig(configOverrides?: { [key: string]: unknown }, out
   // and finally config passed in the configOverrides param wins.
   const config = Object.assign(defaultConfig, scjssConfig, packageJson, configOverrides);
 
+  // for the sake of backwards compatibility - make sure to initialize siteName
+  config.siteName = config.siteName || config.jssAppName;
+
   // The GraphQL endpoint is an example of making a _computed_ config setting
   // based on other config settings.
   const computedConfig: { [key: string]: string } = {};
@@ -75,7 +80,9 @@ function transformScJssConfig() {
     return {};
   }
 
-  if (!config) { return {}; }
+  if (!config) {
+    return {};
+  }
 
   return {
     sitecoreApiKey: config.sitecore.apiKey,
@@ -86,10 +93,12 @@ function transformScJssConfig() {
 function transformPackageConfig() {
   const packageAny = packageConfig;
 
-  if (!packageAny.config) { return {}; }
+  if (!packageAny.config) {
+    return {};
+  }
 
   return {
-    jssAppName: packageAny.config.appName,
+    siteName: packageAny.config.appName,
     defaultLanguage: packageAny.config.language || 'en',
     graphQLEndpointPath: packageAny.config.graphQLEndpointPath || null,
   };

packages/create-sitecore-jss/src/templates/angular/server.bundle.ts

@@ -87,20 +87,17 @@ function renderView(
 
 function parseRouteUrl(url: string) {
   const routeParser = new JssRouteBuilderService();
-  const jssRoute = routeParser.parseRouteUrl(url.split('/').filter((segment) => segment), true);
+  const jssRoute = routeParser.parseRouteUrl(
+    url.split('/').filter((segment) => segment),
+    true
+  );
   return {
     lang: jssRoute.language,
     sitecoreRoute: jssRoute.serverRoute,
   };
 }
 
 const apiKey = environment.sitecoreApiKey;
-const appName = environment.jssAppName;
+const siteName = environment.siteName;
 
-export {
-  renderView,
-  parseRouteUrl,
-  setUpDefaultAgents,
-  apiKey,
-  appName,
-};
+export { renderView, parseRouteUrl, setUpDefaultAgents, apiKey, siteName };

packages/create-sitecore-jss/src/templates/angular/src/app/lib/dictionary-service-factory.ts

@@ -12,7 +12,7 @@ export class DictionaryServiceFactory {
       ? new GraphQLDictionaryService({
           endpoint: env.graphQLEndpoint,
           apiKey: env.sitecoreApiKey,
-          siteName: env.jssAppName,
+          siteName: env.siteName,
           /*
             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;
@@ -23,7 +23,7 @@ export class DictionaryServiceFactory {
       : new RestDictionaryService({
           apiHost: env.sitecoreApiHost,
           apiKey: env.sitecoreApiKey,
-          siteName: env.jssAppName,
+          siteName: env.siteName,
         });
   }
 }

packages/create-sitecore-jss/src/templates/angular/src/app/lib/layout-service-factory.ts

@@ -12,12 +12,12 @@ export class LayoutServiceFactory {
       ? new GraphQLLayoutService({
           endpoint: environment.graphQLEndpoint,
           apiKey: environment.sitecoreApiKey,
-          siteName: environment.jssAppName,
+          siteName: environment.siteName,
         })
       : new RestLayoutService({
           apiHost: environment.sitecoreApiHost,
           apiKey: environment.sitecoreApiKey,
-          siteName: environment.jssAppName,
+          siteName: environment.siteName,
           configurationName: environment.layoutServiceConfigurationName,
         });
   }

packages/create-sitecore-jss/src/templates/nextjs/scripts/generate-config.ts

@@ -10,7 +10,7 @@ import { jssConfigFactory } from './config';
   Generates the /src/temp/config.js file which contains runtime configuration
   that the app can import and use.
 */
-
+// JSS_APP_NAME env variable has been deprecated since v.21.6, SITE_NAME should be used instead
 const defaultConfig: JssConfig = {
   sitecoreApiKey: process.env[`${constantCase('sitecoreApiKey')}`],
   sitecoreApiHost: process.env[`${constantCase('sitecoreApiHost')}`],
@@ -34,10 +34,10 @@ generateConfig(defaultConfig);
 function generateConfig(defaultConfig: JssConfig): void {
   jssConfigFactory
     .create(defaultConfig)
-    .then((config) => {
+    .then(config => {
       writeConfig(config);
     })
-    .catch((e) => {
+    .catch(e => {
       console.error('Error generating config');
       console.error(e);
       process.exit(1);
@@ -55,7 +55,7 @@ function writeConfig(config: JssConfig): void {
 const config = {};\n`;
 
   // Set configuration values, allowing override with environment variables
-  Object.keys(config).forEach((prop) => {
+  Object.keys(config).forEach(prop => {
     configText += `config.${prop} = process.env.${constantCase(prop)} || '${config[prop]}',\n`;
   });
   configText += `module.exports = config;`;

packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/.env

@@ -1,4 +1,4 @@
-SITECORE_JSS_APP_NAME=
+SITECORE_SITE_NAME=
 SITECORE_JSS_SERVER_BUNDLE=
 SITECORE_EXPERIENCE_EDGE_ENDPOINT=
 SITECORE_API_KEY=

packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/README.md

@@ -24,7 +24,7 @@ This is a sample setup showing one of how you can configure rendering server on
 
    > You can use JSS sample apps which support server side rendering (JSS integrated mode) to operate with this project.
 
-1. Deploy the build artifacts from your app (`/dist` or `/build` within the app) to the `sitecoreDistPath` set in your app's `package.json` under the SSR sample root path. Most apps use `/dist/${jssAppName}`, for example `$ssrSampleRoot/dist/${jssAppName}`.
+1. Deploy the build artifacts from your app (`/dist` or `/build` within the app) to the `sitecoreDistPath` set in your app's `package.json` under the SSR sample root path. Most apps use `/dist/${siteName}`, for example `$ssrSampleRoot/dist/${siteName}`.
 
    > Another way to deploy the artifacts to the SSR sample is to change the `instancePath` in your app's `scjssconfig.json` to the SSR sample root path, and then use `jss deploy files` within the app to complete the deployment to the SSR sample.
 
@@ -36,14 +36,14 @@ Open `config.js` and specify your application bundle and connection settings.
 
 The following environment variables can be set to configure the SSR sample instead of modifying `config.js`. You can use the `.env` file located in the root of the app or set these directly in the environment (for example, in containers).
 
-| Parameter                           | Description                                                                                                                                                 |
-| ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `SITECORE_JSS_APP_NAME`             | The JSS app's name. Used when request layout data and dictionary using graphql query and the default value of `SITECORE_JSS_SERVER_BUNDLE` if it's not set. |
-| `SITECORE_API_KEY`                  | The API key provisioned on Sitecore Experience Edge.                                                                                                        |
-| `SITECORE_JSS_SERVER_BUNDLE`        | Path to the JSS app's `server.bundle.js` file.                                                                                                              |
-| `SITECORE_EXPERIENCE_EDGE_ENDPOINT` | Sitecore Experience Edge endpoint.                                                                                                                          |
-| `DEFAULT_LANGUAGE`                  | The JSS app's default language. Used to determine language context in case language is not specified in request URL.                                        |
-| `PORT`                              | Optional. Port which will be used when start sample. Default can be seen in [config.js](./config.js).                                                       |
+| Parameter                           | Description                                                                                                                                                       |
+| ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `SITECORE_SITE_NAME`                | The sitecore site's name. Used when request layout data and dictionary using graphql query and the default value of `SITECORE_JSS_SERVER_BUNDLE` if it's not set. |
+| `SITECORE_API_KEY`                  | The API key provisioned on Sitecore Experience Edge.                                                                                                              |
+| `SITECORE_JSS_SERVER_BUNDLE`        | Path to the JSS app's `server.bundle.js` file.                                                                                                                    |
+| `SITECORE_EXPERIENCE_EDGE_ENDPOINT` | Sitecore Experience Edge endpoint.                                                                                                                                |
+| `DEFAULT_LANGUAGE`                  | The JSS app's default language. Used to determine language context in case language is not specified in request URL.                                              |
+| `PORT`                              | Optional. Port which will be used when start sample. Default can be seen in [config.js](./config.js).                                                             |
 
 ## Build & run
 

packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/config.ts

@@ -1,11 +1,13 @@
 import { Config, ServerBundle } from './types';
-const appName = process.env.SITECORE_JSS_APP_NAME;
+
+// SITECORE_JSS_APP_NAME env variable has been deprecated since v.21.6, SITECORE_SITE_NAME should be used instead
+const siteName = process.env.SITECORE_SITE_NAME || process.env.SITECORE_JSS_APP_NAME;
 
 /**
  * The server.bundle.js file from your pre-built JSS app
  */
 
-const bundlePath = process.env.SITECORE_JSS_SERVER_BUNDLE || `../dist/${appName}/server.bundle`;
+const bundlePath = process.env.SITECORE_JSS_SERVER_BUNDLE || `../dist/${siteName}/server.bundle`;
 
 const serverBundle: ServerBundle = require(bundlePath);
 
@@ -29,7 +31,7 @@ export const config: Config = {
    * The JSS application name defaults to providing part of the bundle path.
    * If not passed as an environment variable or set here, any application name exported from the bundle will be used instead.
    */
-  appName: appName || serverBundle.appName,
+  siteName: siteName || serverBundle.siteName,
   /**
    * Port which will be used when start sample
    */

packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/index.ts

@@ -10,13 +10,13 @@ const server = express();
 const layoutService = new GraphQLLayoutService({
   endpoint: config.endpoint,
   apiKey: config.apiKey,
-  siteName: config.appName,
+  siteName: config.siteName,
 });
 
 const dictionaryService = new GraphQLDictionaryService({
   endpoint: config.endpoint,
   apiKey: config.apiKey,
-  siteName: config.appName,
+  siteName: config.siteName,
   /*
     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;

packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/types.ts

@@ -40,15 +40,15 @@ declare type RouteUrlParser = (
 export interface ServerBundle {
   renderView: AppRenderer;
   parseRouteUrl: RouteUrlParser;
-  appName: string;
+  siteName: string;
   apiKey?: string;
 }
 
 export interface Config {
   [key: string]: unknown;
   endpoint: string;
   apiKey: string;
-  appName: string;
+  siteName: string;
   port: string | number;
   defaultLanguage: string;
   serverBundle: ServerBundle;

packages/create-sitecore-jss/src/templates/node-headless-ssr-proxy/.env

@@ -1,4 +1,4 @@
-SITECORE_JSS_APP_NAME=
+SITECORE_SITE_NAME=
 SITECORE_JSS_SERVER_BUNDLE=
 SITECORE_API_HOST=
 SITECORE_API_KEY=

packages/create-sitecore-jss/src/templates/node-headless-ssr-proxy/README.md

@@ -24,7 +24,7 @@ You can use this as a starting point to unlock deployment of your JSS apps to an
 
     > You can use any of the JSS sample apps. Other apps must support server side rendering (JSS integrated mode) to operate with this project.
 
-1.  Deploy the build artifacts from your app (`/dist` or `/build` within the app) to the `sitecoreDistPath` set in your app's `package.json` under the proxy root path. Most apps use `/dist/${jssAppName}`, for example `$proxyRoot/dist/${jssAppName}`.
+1.  Deploy the build artifacts from your app (`/dist` or `/build` within the app) to the `sitecoreDistPath` set in your app's `package.json` under the proxy root path. Most apps use `/dist/${siteName}`, for example `$proxyRoot/dist/${siteName}`.
 
 > Another way to deploy the artifacts to the proxy is to change the `instancePath` in your app's `scjssconfig.json` to the proxy root path, and then use `jss deploy files` within the app to complete the deployment to the proxy.
 

packages/create-sitecore-jss/src/templates/node-headless-ssr-proxy/src/config.ts

@@ -4,30 +4,32 @@ import { RestDictionaryService } from '@sitecore-jss/sitecore-jss/i18n';
 import { httpAgentsConfig } from './httpAgents';
 
 /**
- * The JSS application name defaults to providing part of the bundle path as well as the dictionary service endpoint.
+ * The sitecore site name defaults to providing part of the bundle path as well as the dictionary service endpoint.
  * If not passed as an environment variable or set here, any application name exported from the bundle will be used instead.
  */
-let appName = process.env.SITECORE_JSS_APP_NAME || 'YOUR APP NAME';
+// SITECORE_JSS_APP_NAME env variable has been deprecated since v.21.6, SITECORE_SITE_NAME should be used instead
+let siteName =
+  process.env.SITECORE_SITE_NAME || process.env.SITECORE_JSS_APP_NAME || 'YOUR SITE NAME';
 
 /**
  * The server.bundle.js file from your pre-built JSS app
  */
 
-const bundlePath = process.env.SITECORE_JSS_SERVER_BUNDLE || `../dist/${appName}/server.bundle`;
+const bundlePath = process.env.SITECORE_JSS_SERVER_BUNDLE || `../dist/${siteName}/server.bundle`;
 
 const serverBundle = require(bundlePath) as ServerBundle;
 
 httpAgentsConfig.setUpDefaultAgents(serverBundle);
 
 const apiHost = process.env.SITECORE_API_HOST || 'http://my.sitecore.host';
 
-appName = appName || serverBundle.appName;
+siteName = siteName || serverBundle.siteName;
 
 const apiKey = process.env.SITECORE_API_KEY || serverBundle.apiKey || '{YOUR API KEY HERE}';
 
 const dictionaryService = new RestDictionaryService({
   apiHost,
-  siteName: appName,
+  siteName: siteName,
   apiKey,
   cacheTimeout: 60,
 });

packages/create-sitecore-jss/src/templates/react/.env

@@ -20,8 +20,9 @@ REACT_APP_SITECORE_API_HOST=
 # the resolved Sitecore API hostname + the `graphQLEndpointPath` defined in your `package.json`.
 REACT_APP_GRAPH_QL_ENDPOINT=
 
-# Your JSS app name (also used as the default site name). Overrides 'config.appName' defined in a package.json
-REACT_APP_JSS_APP_NAME=
+# Your Sitecore site name.
+# Uses your `package.json` config `appName` if empty.
+REACT_APP_SITE_NAME=
 
 # Your default app language.
 REACT_APP_DEFAULT_LANGUAGE=

packages/create-sitecore-jss/src/templates/react/scripts/config/plugins/fallback.js

@@ -10,7 +10,7 @@ class FallbackPlugin {
     return Object.assign({}, config, {
       defaultLanguage: config.defaultLanguage || 'en',
       sitecoreApiKey: config.sitecoreApiKey || 'no-api-key-set',
-      jssAppName: config.jssAppName || 'Unknown',
+      siteName: config.siteName || 'Unknown',
       layoutServiceConfigurationName: config.layoutServiceConfigurationName || 'default',
     });
   }

packages/create-sitecore-jss/src/templates/react/scripts/config/plugins/package-json.js

@@ -10,7 +10,7 @@ class PackageJsonPlugin {
     if (!packageConfig.config) return config;
 
     return Object.assign({}, config, {
-      jssAppName: config.jssAppName || packageConfig.config.appName,
+      siteName: config.siteName || packageConfig.config.appName,
       defaultLanguage: config.defaultLanguage || packageConfig.config.language,
       graphQLEndpointPath: config.graphQLEndpointPath || packageConfig.config.graphQLEndpointPath,
     });

packages/create-sitecore-jss/src/templates/react/scripts/disconnected-mode-proxy.js

@@ -18,11 +18,11 @@ const touchToReloadFilePath = 'src/temp/config.js';
 
 const proxyOptions = {
   appRoot: path.join(__dirname, '..'),
-  appName: config.jssAppName,
+  appName: config.siteName,
   watchPaths: ['./data'],
   language: config.defaultLanguage,
   port: process.env.PROXY_PORT || 3042,
-  onManifestUpdated: (manifest) => {
+  onManifestUpdated: manifest => {
     // if we can resolve the config file, we can alter it to force reloading the app automatically
     // instead of waiting for a manual reload. We must materially alter the _contents_ of the file to trigger
     // an actual reload, so we append "// reloadnow" to the file each time. This will not cause a problem,