[Next.js][RAV][node-headless-ssr] Add Sitecore prefix to SITE_NAME en…

…vironment variable and config (#1672) * Add "sitecore" prefix to SITE_NAME environment variable and config * updated CHANGELOG and one missed file * remove unnecessary config.jssAppName from Angular and Vue to avoid confusion # Conflicts: # packages/create-sitecore-jss/src/templates/angular/.env # packages/create-sitecore-jss/src/templates/nextjs/.env # packages/create-sitecore-jss/src/templates/react/.env # packages/create-sitecore-jss/src/templates/vue/.env
Sitecore · Nov 22, 2023 · 1150cca · 1150cca
1 parent 819dccf
commit 1150cca
Show file tree

Hide file tree

Showing 40 changed files with 69 additions and 76 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,11 +13,11 @@ 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. 
-* `[templates/nextjs]` `[sitecore-jss-nextjs]` `[sitecore-jss]` ([#1640](https://github.com/Sitecore/jss/pull/1640)) ([#1662](https://github.com/Sitecore/jss/pull/1662))([#1661](https://github.com/Sitecore/jss/pull/1661)) Sitecore Edge Platform and Context support:
+* `[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)) ([#1672](https://github.com/Sitecore/jss/pull/1672)) Switch from using JSS_APP_NAME to SITECORE_SITE_NAME - environment and config variables in React, Vue, Angular templates as well as ssr node proxy apps templates have been renamed. 
+* `[templates/nextjs]` `[sitecore-jss-nextjs]` `[sitecore-jss]` ([#1640](https://github.com/Sitecore/jss/pull/1640)) ([#1662](https://github.com/Sitecore/jss/pull/1662))([#1661](https://github.com/Sitecore/jss/pull/1661)) ([#1672](https://github.com/Sitecore/jss/pull/1672)) 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.
   * New SITECORE_EDGE_CONTEXT_ID environment variable has been added.
-  * The JSS_APP_NAME environment variable has been updated and is now referred to as SITE_NAME.
+  * The JSS_APP_NAME environment variable has been updated and is now referred to as SITECORE_SITE_NAME.
 * `[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))

diff --git a/packages/create-sitecore-jss/src/templates/angular/.env b/packages/create-sitecore-jss/src/templates/angular/.env
@@ -19,7 +19,7 @@ GRAPH_QL_ENDPOINT=
 
 # Your Sitecore site name.
 # Uses your `package.json` config `appName` if empty.
-SITE_NAME=
+SITECORE_SITE_NAME=
 
 # Your default app language.
 DEFAULT_LANGUAGE=

diff --git a/packages/create-sitecore-jss/src/templates/angular/scripts/disconnected-mode-proxy.ts b/packages/create-sitecore-jss/src/templates/angular/scripts/disconnected-mode-proxy.ts
@@ -18,15 +18,15 @@ import { environment } from '../src/environments/environment';
 
 const config = environment as {
   [key: string]: unknown;
-  siteName: string;
+  sitecoreSiteName: string;
   defaultLanguage: string;
 };
 
 const touchToReloadFilePath = 'src/environments/environment.js';
 
 const proxyOptions: DisconnectedServerOptions = {
   appRoot: join(__dirname, '..'),
-  appName: config.siteName,
+  appName: config.sitecoreSiteName,
   watchPaths: ['./data'],
   language: config.defaultLanguage,
   // Additional transpilation is not needed

diff --git a/packages/create-sitecore-jss/src/templates/angular/scripts/generate-config.ts b/packages/create-sitecore-jss/src/templates/angular/scripts/generate-config.ts
@@ -10,14 +10,13 @@ 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
+// JSS_APP_NAME env variable has been deprecated since v.21.6, SITECORE_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: process.env.JSS_APP_NAME,
-    siteName: process.env.SITE_NAME,
+    sitecoreSiteName: process.env.SITECORE_SITE_NAME || process.env.JSS_APP_NAME,
     sitecoreLayoutServiceConfig: 'jss',
     defaultLanguage: 'en',
     defaultServerRoute: '/',
@@ -40,9 +39,6 @@ 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 } = {};
@@ -98,7 +94,7 @@ function transformPackageConfig() {
   }
 
   return {
-    siteName: packageAny.config.appName,
+    sitecoreSiteName: packageAny.config.appName,
     defaultLanguage: packageAny.config.language || 'en',
     graphQLEndpointPath: packageAny.config.graphQLEndpointPath || null,
   };

diff --git a/packages/create-sitecore-jss/src/templates/angular/server.bundle.ts b/packages/create-sitecore-jss/src/templates/angular/server.bundle.ts
@@ -98,6 +98,6 @@ function parseRouteUrl(url: string) {
 }
 
 const apiKey = environment.sitecoreApiKey;
-const siteName = environment.siteName;
+const siteName = environment.sitecoreSiteName;
 
 export { renderView, parseRouteUrl, setUpDefaultAgents, apiKey, siteName };
diff --git a/packages/create-sitecore-jss/src/templates/angular/src/app/lib/dictionary-service-factory.ts b/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.siteName,
+          siteName: env.sitecoreSiteName,
           /*
             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.siteName,
+          siteName: env.sitecoreSiteName,
         });
   }
 }

diff --git a/packages/create-sitecore-jss/src/templates/angular/src/app/lib/layout-service-factory.ts b/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.siteName,
+          siteName: environment.sitecoreSiteName,
         })
       : new RestLayoutService({
           apiHost: environment.sitecoreApiHost,
           apiKey: environment.sitecoreApiKey,
-          siteName: environment.siteName,
+          siteName: environment.sitecoreSiteName,
           configurationName: environment.layoutServiceConfigurationName,
         });
   }

diff --git a/...te-sitecore-jss/src/templates/nextjs-multisite/src/lib/page-props-factory/plugins/site.ts b/...te-sitecore-jss/src/templates/nextjs-multisite/src/lib/page-props-factory/plugins/site.ts
@@ -19,7 +19,7 @@ class SitePlugin implements Plugin {
         : context.params.path ?? '/';
 
     // Get site name (from path)
-    const siteData = getSiteRewriteData(path, config.siteName);
+    const siteData = getSiteRewriteData(path, config.sitecoreSiteName);
 
     // Resolve site by name
     props.site = siteResolver.getByName(siteData.siteName);

diff --git a/...es/create-sitecore-jss/src/templates/nextjs-styleguide/scripts/disconnected-mode-proxy.ts b/...es/create-sitecore-jss/src/templates/nextjs-styleguide/scripts/disconnected-mode-proxy.ts
@@ -18,7 +18,7 @@ const touchToReloadFilePath = 'src/temp/config.js';
 
 const serverOptions = {
   appRoot: path.join(__dirname, '..'),
-  appName: config.siteName,
+  appName: config.sitecoreSiteName,
   // Prevent require of ./sitecore/definitions/config.js, because ts-node is running
   requireArg: null,
   watchPaths: ['./data'],

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/pages/404.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/pages/404.tsx
@@ -28,7 +28,7 @@ const Custom404 = (props: SitecorePageProps): JSX.Element => {
 };
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  const site = siteResolver.getByName(config.siteName);
+  const site = siteResolver.getByName(config.sitecoreSiteName);
   const errorPagesService = new GraphQLErrorPagesService({
     clientFactory,
     siteName: site.name,

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/pages/500.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/pages/500.tsx
@@ -44,7 +44,7 @@ const Custom500 = (props: SitecorePageProps): JSX.Element => {
 };
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  const site = siteResolver.getByName(config.siteName);
+  const site = siteResolver.getByName(config.sitecoreSiteName);
   const errorPagesService = new GraphQLErrorPagesService({
     clientFactory,
     siteName: site.name,

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/Bootstrap.tsx b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/Bootstrap.tsx
@@ -12,7 +12,7 @@ const Bootstrap = (props: SitecorePageProps): JSX.Element | null => {
    * This function is the entry point for setting up the application's context and any SDKs that are required for its proper functioning.
    * It prepares the resources needed to interact with various services and features within the application.
    */
-  context.init({ siteName: props.site?.name || config.siteName });
+  context.init({ siteName: props.site?.name || config.sitecoreSiteName });
 
   return null;
 };

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/context/index.ts b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/context/index.ts
@@ -17,6 +17,6 @@ const sdks = {
 export const context = new Context<typeof sdks>({
   sitecoreEdgeUrl: config.sitecoreEdgeUrl,
   sitecoreEdgeContextId: config.sitecoreEdgeContextId,
-  siteName: config.siteName,
+  siteName: config.sitecoreSiteName,
   sdks,
 });
diff --git a/packages/create-sitecore-jss/src/templates/nextjs/.env b/packages/create-sitecore-jss/src/templates/nextjs/.env
@@ -43,7 +43,7 @@ GRAPH_QL_ENDPOINT=
 # Your Sitecore site name.
 # Uses your `package.json` config `appName` if empty.
 # When using the Next.js Multisite add-on, the value of the variable represents the default/configured site.
-SITE_NAME=
+SITECORE_SITE_NAME=
 
 # Your default app language.
 DEFAULT_LANGUAGE=

diff --git a/packages/create-sitecore-jss/src/templates/nextjs/scripts/config/plugins/package-json.ts b/packages/create-sitecore-jss/src/templates/nextjs/scripts/config/plugins/package-json.ts
@@ -12,7 +12,7 @@ class PackageJsonPlugin implements ConfigPlugin {
     if (!packageConfig.config) return config;
 
     return Object.assign({}, config, {
-      siteName: config.siteName || packageConfig.config.appName,
+      sitecoreSiteName: config.sitecoreSiteName || packageConfig.config.appName,
       graphQLEndpointPath: config.graphQLEndpointPath || packageConfig.config.graphQLEndpointPath,
       defaultLanguage: config.defaultLanguage || packageConfig.config.language,
     });

diff --git a/packages/create-sitecore-jss/src/templates/nextjs/scripts/generate-config.ts b/packages/create-sitecore-jss/src/templates/nextjs/scripts/generate-config.ts
@@ -10,12 +10,12 @@ 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
+// JSS_APP_NAME env variable has been deprecated since v.21.6, SITECORE_SITE_NAME should be used instead
 const defaultConfig: JssConfig = {
   sitecoreApiKey: process.env[`${constantCase('sitecoreApiKey')}`],
   sitecoreApiHost: process.env[`${constantCase('sitecoreApiHost')}`],
-  siteName:
-    process.env[`${constantCase('siteName')}`] || process.env[`${constantCase('jssAppName')}`],
+  sitecoreSiteName:
+    process.env[`${constantCase('sitecoreSiteName')}`] || process.env[`${constantCase('jssAppName')}`],
   graphQLEndpointPath: process.env[`${constantCase('graphQLEndpointPath')}`],
   defaultLanguage: process.env[`${constantCase('defaultLanguage')}`],
   graphQLEndpoint: process.env[`${constantCase('graphQLEndpoint')}`],

diff --git a/packages/create-sitecore-jss/src/templates/nextjs/src/lib/config.ts b/packages/create-sitecore-jss/src/templates/nextjs/src/lib/config.ts
@@ -4,7 +4,7 @@
 export interface JssConfig extends Record<string, string | undefined> {
   sitecoreApiKey?: string;
   sitecoreApiHost?: string;
-  siteName?: string;
+  sitecoreSiteName?: string;
   graphQLEndpointPath?: string;
   defaultLanguage?: string;
   graphQLEndpoint?: string;

diff --git a/packages/create-sitecore-jss/src/templates/nextjs/src/lib/page-props-factory/plugins/site.ts b/packages/create-sitecore-jss/src/templates/nextjs/src/lib/page-props-factory/plugins/site.ts
@@ -11,7 +11,7 @@ class SitePlugin implements Plugin {
     if (context.preview) return props;
 
     // Resolve site by name
-    props.site = siteResolver.getByName(config.siteName);
+    props.site = siteResolver.getByName(config.sitecoreSiteName);
 
     return props;
   }

diff --git a/packages/create-sitecore-jss/src/templates/nextjs/src/lib/site-resolver/plugins/default.ts b/packages/create-sitecore-jss/src/templates/nextjs/src/lib/site-resolver/plugins/default.ts
@@ -6,7 +6,7 @@ class DefaultPlugin implements SiteResolverPlugin {
   exec(sites: SiteInfo[]): SiteInfo[] {
     // Add default/configured site
     sites.unshift({
-      name: config.siteName,
+      name: config.sitecoreSiteName,
       language: config.defaultLanguage,
       hostName: '*',
     });

diff --git a/...ecore-jss/src/templates/nextjs/src/lib/sitemap-fetcher/plugins/graphql-sitemap-service.ts b/...ecore-jss/src/templates/nextjs/src/lib/sitemap-fetcher/plugins/graphql-sitemap-service.ts
@@ -13,7 +13,7 @@ class GraphqlSitemapServicePlugin implements SitemapFetcherPlugin {
 
   constructor() {
     this._graphqlSitemapService = new GraphQLSitemapService({
-      siteName: config.siteName,
+      siteName: config.sitecoreSiteName,
       clientFactory,
     });
   }

diff --git a/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/.env b/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/.env
@@ -1,3 +1,4 @@
+SITECORE_JSS_APP_NAME=
 SITECORE_SITE_NAME=
 SITECORE_JSS_SERVER_BUNDLE=
 SITECORE_EXPERIENCE_EDGE_ENDPOINT=

diff --git a/...s/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/README.md b/...s/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/README.md
@@ -20,7 +20,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/${siteName}`, for example `$ssrSampleRoot/dist/${siteName}`.
+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}`.
 
    > 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.
 
@@ -34,7 +34,8 @@ The following environment variables can be set to configure the SSR sample inste
 
 | 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_JSS_APP_NAME`             | The JSS app's name. Used in the default value of `SITECORE_JSS_SERVER_BUNDLE` if it's not set. Used as the `SITECORE_SITE_NAME` if it's not set. |
+| `SITECORE_SITE_NAME`                | The Sitecore site name. Used for layout and dictionary data requests. |
 | `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.                                                                                                                                |

diff --git a/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/config.ts b/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/config.ts
@@ -1,13 +1,14 @@
 import { Config, ServerBundle } from './types';
 
-// 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;
+const appName = process.env.SITECORE_JSS_APP_NAME || 'YOUR APP NAME';
+
+const siteName = process.env.SITECORE_SITE_NAME || appName;
 
 /**
  * The server.bundle.js file from your pre-built JSS app
  */
 
-const bundlePath = process.env.SITECORE_JSS_SERVER_BUNDLE || `../dist/${siteName}/server.bundle`;
+const bundlePath = process.env.SITECORE_JSS_SERVER_BUNDLE || `../dist/${appName}/server.bundle`;
 
 const serverBundle: ServerBundle = require(bundlePath);
 
@@ -28,8 +29,8 @@ export const config: Config = {
    */
   apiKey: process.env.SITECORE_API_KEY || serverBundle.apiKey || '{YOUR API KEY HERE}',
   /**
-   * 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.
+   * The Sitecore site name.
+   * Required.
    */
   siteName: siteName || serverBundle.siteName,
   /**

diff --git a/packages/create-sitecore-jss/src/templates/node-headless-ssr-proxy/.env b/packages/create-sitecore-jss/src/templates/node-headless-ssr-proxy/.env
@@ -1,3 +1,4 @@
+SITECORE_JSS_APP_NAME=
 SITECORE_SITE_NAME=
 SITECORE_JSS_SERVER_BUNDLE=
 SITECORE_API_HOST=

diff --git a/packages/create-sitecore-jss/src/templates/node-headless-ssr-proxy/README.md b/packages/create-sitecore-jss/src/templates/node-headless-ssr-proxy/README.md
@@ -20,7 +20,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/${siteName}`, for example `$proxyRoot/dist/${siteName}`.
+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}`.
 
 > 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.
 
@@ -34,7 +34,8 @@ The following environment variables can be set to configure the proxy instead of
 
 | Parameter                              | Description                                                                                                                                |
 | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `SITECORE_JSS_APP_NAME`                | The JSS app's name. Used in dictionary service URL, and the default value of `SITECORE_JSS_SERVER_BUNDLE` if it's not set.                 |
+| `SITECORE_JSS_APP_NAME`             | The JSS app's name. Used in the default value of `SITECORE_JSS_SERVER_BUNDLE` if it's not set. Used as the `SITECORE_SITE_NAME` if it's not set. |
+| `SITECORE_SITE_NAME`                | The Sitecore site name. Used for layout and dictionary data requests. |
 | `SITECORE_JSS_SERVER_BUNDLE`           | Path to the JSS app's `server.bundle.js` file.                                                                                             |
 | `SITECORE_API_HOST`                    | Sitecore instance host name. Should be HTTPS in production.                                                                                |
 | `SITECORE_LAYOUT_SERVICE_ROUTE`        | Optional. The path to layout service for the JSS application. Defaults to `/sitecore/api/layout/render/jss`.                               |

diff --git a/packages/create-sitecore-jss/src/templates/node-headless-ssr-proxy/src/config.ts b/packages/create-sitecore-jss/src/templates/node-headless-ssr-proxy/src/config.ts
@@ -3,19 +3,15 @@ import fs from 'fs';
 import { RestDictionaryService } from '@sitecore-jss/sitecore-jss/i18n';
 import { httpAgentsConfig } from './httpAgents';
 
-/**
- * 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.
- */
-// 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';
+const appName = process.env.SITECORE_JSS_APP_NAME || 'YOUR APP NAME';
+
+let siteName = process.env.SITECORE_SITE_NAME || appName;
 
 /**
  * The server.bundle.js file from your pre-built JSS app
  */
 
-const bundlePath = process.env.SITECORE_JSS_SERVER_BUNDLE || `../dist/${siteName}/server.bundle`;
+const bundlePath = process.env.SITECORE_JSS_SERVER_BUNDLE || `../dist/${appName}/server.bundle`;
 
 const serverBundle = require(bundlePath) as ServerBundle;
 

diff --git a/packages/create-sitecore-jss/src/templates/react/.env b/packages/create-sitecore-jss/src/templates/react/.env
@@ -22,7 +22,7 @@ REACT_APP_GRAPH_QL_ENDPOINT=
 
 # Your Sitecore site name.
 # Uses your `package.json` config `appName` if empty.
-REACT_APP_SITE_NAME=
+REACT_APP_SITECORE_SITE_NAME=
 
 # Your default app language.
 REACT_APP_DEFAULT_LANGUAGE=