diff --git a/CHANGELOG.md b/CHANGELOG.md
index 20382448f7..1e85f1f7fc 100644
--- a/CHANGELOG.md
+++ b/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.
diff --git a/packages/create-sitecore-jss/src/templates/angular/.env b/packages/create-sitecore-jss/src/templates/angular/.env
index ac3a727160..1f569cbf3d 100644
--- a/packages/create-sitecore-jss/src/templates/angular/.env
+++ b/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=
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
index 28652c18ba..096be36ad0 100644
--- 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
@@ -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
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
index c5823883ca..a83e6b8b9b 100644
--- 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,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,
   };
diff --git a/packages/create-sitecore-jss/src/templates/angular/server.bundle.ts b/packages/create-sitecore-jss/src/templates/angular/server.bundle.ts
index 32189c2e00..43473295bc 100644
--- a/packages/create-sitecore-jss/src/templates/angular/server.bundle.ts
+++ b/packages/create-sitecore-jss/src/templates/angular/server.bundle.ts
@@ -87,7 +87,10 @@ 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,
@@ -95,12 +98,6 @@ function parseRouteUrl(url: string) {
 }
 
 const apiKey = environment.sitecoreApiKey;
-const appName = environment.jssAppName;
+const siteName = environment.siteName;
 
-export {
-  renderView,
-  parseRouteUrl,
-  setUpDefaultAgents,
-  apiKey,
-  appName,
-};
+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
index 428cc36382..ba67ec29f4 100644
--- 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.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,
         });
   }
 }
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
index cef90a28c6..2e420c80f0 100644
--- 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.jssAppName,
+          siteName: environment.siteName,
         })
       : new RestLayoutService({
           apiHost: environment.sitecoreApiHost,
           apiKey: environment.sitecoreApiKey,
-          siteName: environment.jssAppName,
+          siteName: environment.siteName,
           configurationName: environment.layoutServiceConfigurationName,
         });
   }
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
index 67c7c5b0f8..2369bc8f87 100644
--- 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,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;`;
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
index 41686b6728..05c713d085 100644
--- 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,4 +1,4 @@
-SITECORE_JSS_APP_NAME=
+SITECORE_SITE_NAME=
 SITECORE_JSS_SERVER_BUNDLE=
 SITECORE_EXPERIENCE_EDGE_ENDPOINT=
 SITECORE_API_KEY=
diff --git a/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/README.md b/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/README.md
index 4a4c242084..67a9067f65 100644
--- a/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/README.md
+++ b/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
 
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
index fb5896d8c4..38ce65b885 100644
--- 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,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
    */
diff --git a/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/index.ts b/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/index.ts
index 0083857b3a..9b82e12485 100644
--- a/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/index.ts
+++ b/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;
diff --git a/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/types.ts b/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/types.ts
index 739de89aaa..84732c52a8 100644
--- a/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/types.ts
+++ b/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/types.ts
@@ -40,7 +40,7 @@ declare type RouteUrlParser = (
 export interface ServerBundle {
   renderView: AppRenderer;
   parseRouteUrl: RouteUrlParser;
-  appName: string;
+  siteName: string;
   apiKey?: string;
 }
 
@@ -48,7 +48,7 @@ export interface Config {
   [key: string]: unknown;
   endpoint: string;
   apiKey: string;
-  appName: string;
+  siteName: string;
   port: string | number;
   defaultLanguage: string;
   serverBundle: ServerBundle;
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
index b3ed3be246..263a28af6b 100644
--- 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,4 +1,4 @@
-SITECORE_JSS_APP_NAME=
+SITECORE_SITE_NAME=
 SITECORE_JSS_SERVER_BUNDLE=
 SITECORE_API_HOST=
 SITECORE_API_KEY=
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
index ef6b0f0cf2..390d0cb888 100644
--- 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
@@ -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.
 
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
index d2606bf1e1..4521deacf7 100644
--- 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
@@ -4,16 +4,18 @@ 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;
 
@@ -21,13 +23,13 @@ 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,
 });
diff --git a/packages/create-sitecore-jss/src/templates/react/.env b/packages/create-sitecore-jss/src/templates/react/.env
index 37c9868a42..43664dfacc 100644
--- a/packages/create-sitecore-jss/src/templates/react/.env
+++ b/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=
diff --git a/packages/create-sitecore-jss/src/templates/react/scripts/config/plugins/fallback.js b/packages/create-sitecore-jss/src/templates/react/scripts/config/plugins/fallback.js
index 7caee94ebe..df3c16c354 100644
--- a/packages/create-sitecore-jss/src/templates/react/scripts/config/plugins/fallback.js
+++ b/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',
     });
   }
diff --git a/packages/create-sitecore-jss/src/templates/react/scripts/config/plugins/package-json.js b/packages/create-sitecore-jss/src/templates/react/scripts/config/plugins/package-json.js
index a741a79d78..bf958ca421 100644
--- a/packages/create-sitecore-jss/src/templates/react/scripts/config/plugins/package-json.js
+++ b/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,
     });
diff --git a/packages/create-sitecore-jss/src/templates/react/scripts/disconnected-mode-proxy.js b/packages/create-sitecore-jss/src/templates/react/scripts/disconnected-mode-proxy.js
index b53c374635..15e035e0d1 100644
--- a/packages/create-sitecore-jss/src/templates/react/scripts/disconnected-mode-proxy.js
+++ b/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,
diff --git a/packages/create-sitecore-jss/src/templates/react/scripts/generate-config.js b/packages/create-sitecore-jss/src/templates/react/scripts/generate-config.js
index 554687dd72..534fe7d4b0 100644
--- a/packages/create-sitecore-jss/src/templates/react/scripts/generate-config.js
+++ b/packages/create-sitecore-jss/src/templates/react/scripts/generate-config.js
@@ -9,17 +9,21 @@ const { jssConfigFactory } = require('./config');
 /**
  * REACT_APP is the default prefix for environment variables that will be made available to the app.
  */
+// REACT_APP_JSS_APP_NAME env variable has been deprecated since v.21.6, REACT_APP_SITE_NAME should be used instead
 const defaultConfig = {
   sitecoreApiKey: process.env[`${constantCase('reactAppSitecoreApiKey')}`],
   sitecoreApiHost: process.env[`${constantCase('reactAppSitecoreApiHost')}`],
-  jssAppName: process.env[`${constantCase('reactAppJssAppName')}`],
+  siteName:
+    process.env[`${constantCase('reactAppSiteName')}`] ||
+    process.env[`${constantCase('reactAppJssAppName')}`],
   graphQLEndpointPath: process.env[`${constantCase('reactAppGraphQLEndpointPath')}`],
   defaultLanguage: process.env[`${constantCase('reactAppDefaultLanguage')}`],
   graphQLEndpoint: process.env[`${constantCase('reactAppGraphQLEndpoint')}`],
-  layoutServiceConfigurationName: process.env[`${constantCase('reactAppLayoutServiceConfigurationName')}`],
+  layoutServiceConfigurationName:
+    process.env[`${constantCase('reactAppLayoutServiceConfigurationName')}`],
 };
 
-generateConfig()
+generateConfig();
 
 /**
  * Generate config
@@ -30,7 +34,7 @@ generateConfig()
  */
 function generateConfig() {
   try {
-    config = jssConfigFactory.create(defaultConfig)
+    config = jssConfigFactory.create(defaultConfig);
   } catch (error) {
     console.error('Error generating config');
     console.error(error);
@@ -38,7 +42,7 @@ function generateConfig() {
   }
 
   writeConfig(config);
-};
+}
 
 function writeConfig(config) {
   let configText = `/* eslint-disable */
@@ -47,7 +51,7 @@ function writeConfig(config) {
 const config = {};\n`;
 
   // Set base configuration values, allowing override with environment variables
-  Object.keys(config).forEach((prop) => {
+  Object.keys(config).forEach(prop => {
     configText += `config.${prop} = process.env.REACT_APP_${constantCase(prop)} || "${
       config[prop]
     }",\n`;
diff --git a/packages/create-sitecore-jss/src/templates/react/server/server.js b/packages/create-sitecore-jss/src/templates/react/server/server.js
index f8d558836b..8a4c9c0c8e 100644
--- a/packages/create-sitecore-jss/src/templates/react/server/server.js
+++ b/packages/create-sitecore-jss/src/templates/react/server/server.js
@@ -40,7 +40,7 @@ export const setUpDefaultAgents = (httpAgent, httpsAgent) => {
 
 // Export app configuration; this will be used when this app runs in Headless mode (ie node-headless-ssr-experience-edge or node-headless-ssr-proxy)
 export const apiKey = config.sitecoreApiKey;
-export const appName = config.jssAppName;
+export const siteName = config.siteName;
 export const defaultLanguage = config.defaultLanguage;
 
 /**
@@ -81,12 +81,12 @@ export function renderView(callback, path, data, viewBag) {
           />
         )
       )
-      .then((renderedAppHtml) =>
+      .then(renderedAppHtml =>
         // getHtmlTemplate() should return the "shell" HTML template that the rendered app
         // will be injected into. In many cases, the HTML template will be the same for client-side
         // rendering and for server-sider rendering. However, in some instances (e.g. JSS render host)
         // the HTML template needs to be modified or replaced when rendering.
-        getHtmlTemplate(state).then((htmlTemplate) => ({
+        getHtmlTemplate(state).then(htmlTemplate => ({
           htmlTemplate,
           renderedAppHtml,
         }))
@@ -139,7 +139,7 @@ export function renderView(callback, path, data, viewBag) {
 
         callback(null, { html });
       })
-      .catch((error) => callback(error, null));
+      .catch(error => callback(error, null));
   } catch (err) {
     // need to ensure the callback is always invoked no matter what
     // or else SSR will hang
diff --git a/packages/create-sitecore-jss/src/templates/react/src/lib/dictionary-service-factory.js b/packages/create-sitecore-jss/src/templates/react/src/lib/dictionary-service-factory.js
index 907df4b3f4..ac880a0e7f 100644
--- a/packages/create-sitecore-jss/src/templates/react/src/lib/dictionary-service-factory.js
+++ b/packages/create-sitecore-jss/src/templates/react/src/lib/dictionary-service-factory.js
@@ -11,7 +11,7 @@ export class DictionaryServiceFactory {
       ? new GraphQLDictionaryService({
           endpoint: config.graphQLEndpoint,
           apiKey: config.sitecoreApiKey,
-          siteName: config.jssAppName,
+          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;
@@ -22,7 +22,7 @@ export class DictionaryServiceFactory {
       : new RestDictionaryService({
           apiHost: config.sitecoreApiHost,
           apiKey: config.sitecoreApiKey,
-          siteName: config.jssAppName,
+          siteName: config.siteName,
         });
   }
 }
diff --git a/packages/create-sitecore-jss/src/templates/react/src/lib/layout-service-factory.js b/packages/create-sitecore-jss/src/templates/react/src/lib/layout-service-factory.js
index fb4fcdd59e..43d3a5d018 100644
--- a/packages/create-sitecore-jss/src/templates/react/src/lib/layout-service-factory.js
+++ b/packages/create-sitecore-jss/src/templates/react/src/lib/layout-service-factory.js
@@ -11,12 +11,12 @@ export class LayoutServiceFactory {
       ? new GraphQLLayoutService({
           endpoint: config.graphQLEndpoint,
           apiKey: config.sitecoreApiKey,
-          siteName: config.jssAppName,
+          siteName: config.siteName,
         })
       : new RestLayoutService({
           apiHost: config.sitecoreApiHost,
           apiKey: config.sitecoreApiKey,
-          siteName: config.jssAppName,
+          siteName: config.siteName,
           configurationName: config.layoutServiceConfigurationName,
         });
   }
diff --git a/packages/create-sitecore-jss/src/templates/vue/.env b/packages/create-sitecore-jss/src/templates/vue/.env
index 758944e93d..fd829b14d3 100644
--- a/packages/create-sitecore-jss/src/templates/vue/.env
+++ b/packages/create-sitecore-jss/src/templates/vue/.env
@@ -19,8 +19,9 @@ VUE_APP_SITECORE_API_HOST=
 # the resolved Sitecore API hostname + the `graphQLEndpointPath` defined in your `package.json`.
 VUE_APP_GRAPH_QL_ENDPOINT=
 
-# Your JSS app name (also used as the default site name). Overrides 'config.appName' defined in a package.json
-VUE_APP_JSS_APP_NAME=
+# Your Sitecore site name.
+# Uses your `package.json` config `appName` if empty.
+VUE_APP_SITE_NAME=
 
 # Your default app language.
 VUE_APP_DEFAULT_LANGUAGE=
diff --git a/packages/create-sitecore-jss/src/templates/vue/scripts/disconnected-mode-proxy.js b/packages/create-sitecore-jss/src/templates/vue/scripts/disconnected-mode-proxy.js
index d765f81704..384975521a 100644
--- a/packages/create-sitecore-jss/src/templates/vue/scripts/disconnected-mode-proxy.js
+++ b/packages/create-sitecore-jss/src/templates/vue/scripts/disconnected-mode-proxy.js
@@ -21,7 +21,7 @@ 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,
diff --git a/packages/create-sitecore-jss/src/templates/vue/scripts/generate-config.js b/packages/create-sitecore-jss/src/templates/vue/scripts/generate-config.js
index f6aa3b4b09..f55b291773 100644
--- a/packages/create-sitecore-jss/src/templates/vue/scripts/generate-config.js
+++ b/packages/create-sitecore-jss/src/templates/vue/scripts/generate-config.js
@@ -13,11 +13,13 @@ const packageConfig = require('../package.json');
  * NOTE! Any configs returned here will be written into the client-side JS bundle. DO NOT PUT SECRETS HERE.
  * @param {object} configOverrides Keys in this object will override any equivalent global config keys.
  */
+// VUE_APP_JSS_APP_NAME env variable has been deprecated since v.21.6, VUE_APP_SITE_NAME should be used instead
 module.exports = function generateConfig(configOverrides) {
   const defaultConfig = {
     sitecoreApiKey: 'no-api-key-set',
     sitecoreApiHost: '',
-    jssAppName: 'Unknown',
+    jssAppName: process.env.VUE_APP_JSS_APP_NAME,
+    siteName: process.env.VUE_APP_SITE_NAME,
     layoutServiceConfigurationName: 'default',
   };
 
@@ -33,6 +35,9 @@ module.exports = function generateConfig(configOverrides) {
   // 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 = {};
@@ -45,7 +50,9 @@ const config = {};\n`;
 
   // Set base configuration values, allowing override with environment variables
   Object.keys(config).forEach((prop) => {
-    configText += `config.${prop} = process.env.VUE_APP_${constantCase(prop)} || "${config[prop]}",\n`;
+    configText += `config.${prop} = process.env.VUE_APP_${constantCase(prop)} || "${
+      config[prop]
+    }",\n`;
   });
   // Set computed values, allowing override with environment variables
   Object.keys(computedConfig).forEach((prop) => {
@@ -83,7 +90,7 @@ function transformPackageConfig() {
   if (!packageConfig.config) return {};
 
   return {
-    jssAppName: packageConfig.config.appName,
+    siteName: packageConfig.config.appName,
     defaultLanguage: packageConfig.config.language || 'en',
     graphQLEndpointPath: packageConfig.config.graphQLEndpointPath || null,
   };
diff --git a/packages/create-sitecore-jss/src/templates/vue/server/server.js b/packages/create-sitecore-jss/src/templates/vue/server/server.js
index 0f383384a5..ee031d42c5 100644
--- a/packages/create-sitecore-jss/src/templates/vue/server/server.js
+++ b/packages/create-sitecore-jss/src/templates/vue/server/server.js
@@ -40,7 +40,7 @@ export const setUpDefaultAgents = (httpAgent, httpsAgent) => {
 export const apiKey = config.sitecoreApiKey;
 
 /** Export the app name. This will be used by default in Headless mode, removing the need to manually configure the app name on the proxy. */
-export const appName = config.jssAppName;
+export const siteName = config.siteName;
 
 /**
  * Main entry point to the application when run via Server-Side Rendering,
diff --git a/packages/create-sitecore-jss/src/templates/vue/src/lib/dictionary-service-factory.js b/packages/create-sitecore-jss/src/templates/vue/src/lib/dictionary-service-factory.js
index 71dd6106b1..75f4c65d94 100644
--- a/packages/create-sitecore-jss/src/templates/vue/src/lib/dictionary-service-factory.js
+++ b/packages/create-sitecore-jss/src/templates/vue/src/lib/dictionary-service-factory.js
@@ -1,4 +1,8 @@
-import { GraphQLDictionaryService, RestDictionaryService, constants } from '@sitecore-jss/sitecore-jss-vue';
+import {
+  GraphQLDictionaryService,
+  RestDictionaryService,
+  constants,
+} from '@sitecore-jss/sitecore-jss-vue';
 import config from '../temp/config';
 
 export class DictionaryServiceFactory {
@@ -7,7 +11,7 @@ export class DictionaryServiceFactory {
       ? new GraphQLDictionaryService({
           endpoint: config.graphQLEndpoint,
           apiKey: config.sitecoreApiKey,
-          siteName: config.jssAppName,
+          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;
@@ -18,7 +22,7 @@ export class DictionaryServiceFactory {
       : new RestDictionaryService({
           apiHost: config.sitecoreApiHost,
           apiKey: config.sitecoreApiKey,
-          siteName: config.jssAppName,
+          siteName: config.siteName,
         });
   }
 }
diff --git a/packages/create-sitecore-jss/src/templates/vue/src/lib/layout-service-factory.js b/packages/create-sitecore-jss/src/templates/vue/src/lib/layout-service-factory.js
index a591ff8526..47153c479b 100644
--- a/packages/create-sitecore-jss/src/templates/vue/src/lib/layout-service-factory.js
+++ b/packages/create-sitecore-jss/src/templates/vue/src/lib/layout-service-factory.js
@@ -7,12 +7,12 @@ export class LayoutServiceFactory {
       ? new GraphQLLayoutService({
           endpoint: config.graphQLEndpoint,
           apiKey: config.sitecoreApiKey,
-          siteName: config.jssAppName,
+          siteName: config.siteName,
         })
       : new RestLayoutService({
           apiHost: config.sitecoreApiHost,
           apiKey: config.sitecoreApiKey,
-          siteName: config.jssAppName,
+          siteName: config.siteName,
           configurationName: config.layoutServiceConfigurationName,
         });
   }
diff --git a/packages/sitecore-jss-proxy/src/ProxyConfig.ts b/packages/sitecore-jss-proxy/src/ProxyConfig.ts
index 053bd044a5..9c468d3af8 100644
--- a/packages/sitecore-jss-proxy/src/ProxyConfig.ts
+++ b/packages/sitecore-jss-proxy/src/ProxyConfig.ts
@@ -20,6 +20,7 @@ export interface LayoutServiceData {
 export interface ServerBundle {
   [key: string]: unknown;
   appName: string;
+  siteName: string;
   apiKey: string;
   renderView: AppRenderer;
   parseRouteUrl: RouteUrlParser;
diff --git a/packages/sitecore-jss-proxy/src/test/config.test.ts b/packages/sitecore-jss-proxy/src/test/config.test.ts
index 0e936f34c0..ba2faff79e 100644
--- a/packages/sitecore-jss-proxy/src/test/config.test.ts
+++ b/packages/sitecore-jss-proxy/src/test/config.test.ts
@@ -18,6 +18,7 @@ const config: ProxyConfig = {
       };
     },
     appName: 'APP_NAME',
+    siteName: 'APP_NAME',
     apiKey: '{GUID}',
   },
 };