From 1150cca520f457dea05d7fdd5f28d799c1afe3fc Mon Sep 17 00:00:00 2001 From: Adam Brauer <400763+ambrauer@users.noreply.github.com> Date: Wed, 22 Nov 2023 11:17:36 -0600 Subject: [PATCH] [Next.js][RAV][node-headless-ssr] Add Sitecore prefix to SITE_NAME environment 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 --- CHANGELOG.md | 6 +++--- .../create-sitecore-jss/src/templates/angular/.env | 2 +- .../angular/scripts/disconnected-mode-proxy.ts | 4 ++-- .../src/templates/angular/scripts/generate-config.ts | 10 +++------- .../src/templates/angular/server.bundle.ts | 2 +- .../src/app/lib/dictionary-service-factory.ts | 4 ++-- .../angular/src/app/lib/layout-service-factory.ts | 4 ++-- .../src/lib/page-props-factory/plugins/site.ts | 2 +- .../scripts/disconnected-mode-proxy.ts | 2 +- .../src/templates/nextjs-sxa/src/pages/404.tsx | 2 +- .../src/templates/nextjs-sxa/src/pages/500.tsx | 2 +- .../src/templates/nextjs-xmcloud/src/Bootstrap.tsx | 2 +- .../nextjs-xmcloud/src/lib/context/index.ts | 2 +- .../create-sitecore-jss/src/templates/nextjs/.env | 2 +- .../nextjs/scripts/config/plugins/package-json.ts | 2 +- .../src/templates/nextjs/scripts/generate-config.ts | 6 +++--- .../src/templates/nextjs/src/lib/config.ts | 2 +- .../src/lib/page-props-factory/plugins/site.ts | 2 +- .../nextjs/src/lib/site-resolver/plugins/default.ts | 2 +- .../plugins/graphql-sitemap-service.ts | 2 +- .../templates/node-headless-ssr-experience-edge/.env | 1 + .../node-headless-ssr-experience-edge/README.md | 5 +++-- .../node-headless-ssr-experience-edge/src/config.ts | 11 ++++++----- .../src/templates/node-headless-ssr-proxy/.env | 1 + .../src/templates/node-headless-ssr-proxy/README.md | 5 +++-- .../templates/node-headless-ssr-proxy/src/config.ts | 12 ++++-------- .../create-sitecore-jss/src/templates/react/.env | 2 +- .../react/scripts/config/plugins/fallback.js | 2 +- .../react/scripts/config/plugins/package-json.js | 2 +- .../react/scripts/disconnected-mode-proxy.js | 2 +- .../src/templates/react/scripts/generate-config.js | 4 ++-- .../src/templates/react/server/server.js | 2 +- .../react/src/lib/dictionary-service-factory.js | 4 ++-- .../react/src/lib/layout-service-factory.js | 4 ++-- packages/create-sitecore-jss/src/templates/vue/.env | 2 +- .../templates/vue/scripts/disconnected-mode-proxy.js | 2 +- .../src/templates/vue/scripts/generate-config.js | 10 +++------- .../src/templates/vue/server/server.js | 4 ++-- .../vue/src/lib/dictionary-service-factory.js | 4 ++-- .../templates/vue/src/lib/layout-service-factory.js | 4 ++-- 40 files changed, 69 insertions(+), 76 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c0386cc2e4..9db9090771 100644 --- 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 index e7a4468970..996f8256de 100644 --- 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 index 096be36ad0..a287b4fb59 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 @@ -18,7 +18,7 @@ import { environment } from '../src/environments/environment'; const config = environment as { [key: string]: unknown; - siteName: string; + sitecoreSiteName: string; defaultLanguage: string; }; @@ -26,7 +26,7 @@ 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 index a83e6b8b9b..4e2a353da4 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,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 index 43473295bc..a12557d974 100644 --- 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 index ba67ec29f4..e10e93f7d2 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.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 index 2e420c80f0..7fffd4f165 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.siteName, + siteName: environment.sitecoreSiteName, }) : new RestLayoutService({ apiHost: environment.sitecoreApiHost, apiKey: environment.sitecoreApiKey, - siteName: environment.siteName, + siteName: environment.sitecoreSiteName, configurationName: environment.layoutServiceConfigurationName, }); } diff --git a/packages/create-sitecore-jss/src/templates/nextjs-multisite/src/lib/page-props-factory/plugins/site.ts b/packages/create-sitecore-jss/src/templates/nextjs-multisite/src/lib/page-props-factory/plugins/site.ts index e21b029050..89b25aca21 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-multisite/src/lib/page-props-factory/plugins/site.ts +++ b/packages/create-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/packages/create-sitecore-jss/src/templates/nextjs-styleguide/scripts/disconnected-mode-proxy.ts b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/scripts/disconnected-mode-proxy.ts index 3f509d5301..dd087c5ad3 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/scripts/disconnected-mode-proxy.ts +++ b/packages/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 index cf1fef2292..6e829a751f 100644 --- 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 index dc0ac5adf4..cb185cb32e 100644 --- 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 index 9e7be115d4..cc4fda8de5 100644 --- 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 index 8ba26ce19f..4323c5ff53 100644 --- 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({ 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 index 9f2db19a61..414bd7ecd6 100644 --- 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 index f411d9d283..af95fa221c 100644 --- 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 index beca398a20..f366c998e7 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,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 index 83a2596423..0a593cf8a4 100644 --- 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 { 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 index 5a0f13299a..5ddf93b156 100644 --- 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 index 7f6bb697e6..f76a54d3b7 100644 --- 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/packages/create-sitecore-jss/src/templates/nextjs/src/lib/sitemap-fetcher/plugins/graphql-sitemap-service.ts b/packages/create-sitecore-jss/src/templates/nextjs/src/lib/sitemap-fetcher/plugins/graphql-sitemap-service.ts index 9b41675535..f932adec17 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs/src/lib/sitemap-fetcher/plugins/graphql-sitemap-service.ts +++ b/packages/create-sitecore-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 index 05c713d085..c6323becd2 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,3 +1,4 @@ +SITECORE_JSS_APP_NAME= SITECORE_SITE_NAME= SITECORE_JSS_SERVER_BUNDLE= SITECORE_EXPERIENCE_EDGE_ENDPOINT= 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 564ddcbb82..2dc33566bf 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 @@ -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 index 38ce65b885..93cc4adad9 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,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 index 263a28af6b..2ce1bf95c0 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,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 index 1d84eb898c..0ec4dc3242 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 @@ -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 index 4521deacf7..39a2d6d085 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 @@ -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 index 2589902d3a..679a713266 100644 --- 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= 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 df3c16c354..17324b6574 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', - siteName: config.siteName || 'Unknown', + sitecoreSiteName: config.sitecoreSiteName || '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 bf958ca421..3001bb4f09 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, { - siteName: config.siteName || packageConfig.config.appName, + sitecoreSiteName: config.sitecoreSiteName || 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 15e035e0d1..5425b795b1 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,7 +18,7 @@ const touchToReloadFilePath = 'src/temp/config.js'; const proxyOptions = { appRoot: path.join(__dirname, '..'), - appName: config.siteName, + appName: config.sitecoreSiteName, watchPaths: ['./data'], language: config.defaultLanguage, port: process.env.PROXY_PORT || 3042, 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 534fe7d4b0..5c59fdc0d8 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 @@ -13,8 +13,8 @@ const { jssConfigFactory } = require('./config'); const defaultConfig = { sitecoreApiKey: process.env[`${constantCase('reactAppSitecoreApiKey')}`], sitecoreApiHost: process.env[`${constantCase('reactAppSitecoreApiHost')}`], - siteName: - process.env[`${constantCase('reactAppSiteName')}`] || + sitecoreSiteName: + process.env[`${constantCase('reactAppSitecoreSiteName')}`] || process.env[`${constantCase('reactAppJssAppName')}`], graphQLEndpointPath: process.env[`${constantCase('reactAppGraphQLEndpointPath')}`], defaultLanguage: process.env[`${constantCase('reactAppDefaultLanguage')}`], 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 8a4c9c0c8e..b5cb337abc 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 siteName = config.siteName; +export const siteName = config.sitecoreSiteName; export const defaultLanguage = config.defaultLanguage; /** 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 ac880a0e7f..e7652ac554 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.siteName, + siteName: config.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; @@ -22,7 +22,7 @@ export class DictionaryServiceFactory { : new RestDictionaryService({ apiHost: config.sitecoreApiHost, apiKey: config.sitecoreApiKey, - siteName: config.siteName, + siteName: config.sitecoreSiteName, }); } } 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 43d3a5d018..8895c04035 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.siteName, + siteName: config.sitecoreSiteName, }) : new RestLayoutService({ apiHost: config.sitecoreApiHost, apiKey: config.sitecoreApiKey, - siteName: config.siteName, + siteName: config.sitecoreSiteName, configurationName: config.layoutServiceConfigurationName, }); } diff --git a/packages/create-sitecore-jss/src/templates/vue/.env b/packages/create-sitecore-jss/src/templates/vue/.env index 98af9f5118..dcc5a87cf9 100644 --- a/packages/create-sitecore-jss/src/templates/vue/.env +++ b/packages/create-sitecore-jss/src/templates/vue/.env @@ -21,7 +21,7 @@ VUE_APP_GRAPH_QL_ENDPOINT= # Your Sitecore site name. # Uses your `package.json` config `appName` if empty. -VUE_APP_SITE_NAME= +VUE_APP_SITECORE_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 384975521a..67b3e0aa97 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.siteName, + appName: config.sitecoreSiteName, 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 f55b291773..fa7ec27201 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,13 +13,12 @@ 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 +// VUE_APP_JSS_APP_NAME env variable has been deprecated since v.21.6, VUE_APP_SITECORE_SITE_NAME should be used instead module.exports = function generateConfig(configOverrides) { const defaultConfig = { sitecoreApiKey: 'no-api-key-set', sitecoreApiHost: '', - jssAppName: process.env.VUE_APP_JSS_APP_NAME, - siteName: process.env.VUE_APP_SITE_NAME, + sitecoreSiteName: process.env.VUE_APP_SITECORE_SITE_NAME || process.env.VUE_APP_JSS_APP_NAME, layoutServiceConfigurationName: 'default', }; @@ -35,9 +34,6 @@ 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 = {}; @@ -90,7 +86,7 @@ function transformPackageConfig() { if (!packageConfig.config) return {}; return { - siteName: packageConfig.config.appName, + sitecoreSiteName: 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 ee031d42c5..26b9b16afa 100644 --- a/packages/create-sitecore-jss/src/templates/vue/server/server.js +++ b/packages/create-sitecore-jss/src/templates/vue/server/server.js @@ -39,8 +39,8 @@ export const setUpDefaultAgents = (httpAgent, httpsAgent) => { /** Export the API key. This will be used by default in Headless mode, removing the need to manually configure the API key on the proxy. */ 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 siteName = config.siteName; +/** Export the site name. This will be used by default in Headless mode, removing the need to manually configure the site name on the proxy. */ +export const siteName = config.sitecoreSiteName; /** * 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 75f4c65d94..55abb6e276 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 @@ -11,7 +11,7 @@ export class DictionaryServiceFactory { ? new GraphQLDictionaryService({ endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey, - siteName: config.siteName, + siteName: config.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; @@ -22,7 +22,7 @@ export class DictionaryServiceFactory { : new RestDictionaryService({ apiHost: config.sitecoreApiHost, apiKey: config.sitecoreApiKey, - siteName: config.siteName, + siteName: config.sitecoreSiteName, }); } } 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 47153c479b..826cc210ee 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.siteName, + siteName: config.sitecoreSiteName, }) : new RestLayoutService({ apiHost: config.sitecoreApiHost, apiKey: config.sitecoreApiKey, - siteName: config.siteName, + siteName: config.sitecoreSiteName, configurationName: config.layoutServiceConfigurationName, }); }