Ensure app config variables have values at build-time (#1296)

* dynamic config value evaluation at build time

* finalize dynamic and build time config value processing

* rework for build-time config resolution logic, with fallback

* revert JssConfig type to how it was

* small tweaks, addressing comments

Author: art-alexeyenko

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

@@ -13,12 +13,13 @@ class MultisitePlugin implements ConfigPlugin {
 
   async exec(config: JssConfig) {
     let sites: SiteInfo[] = [];
-    const endpoint = process.env.GRAPH_QL_ENDPOINT || config.graphQLEndpoint;
-    const apiKey = process.env.SITECORE_API_KEY || config.sitecoreApiKey;
+
+    const endpoint = config.graphQLEndpoint;
+    const apiKey = config.sitecoreApiKey;
 
     if (!endpoint || !apiKey) {
       console.warn(
-        chalk.yellow('Skipping site information fetch (missing GraphQL connection details)')
+        chalk.yellow('Skipping site information fetch (missing GraphQL endpoint or API key).')
       );
     } else {
       console.log(`Fetching site information from ${endpoint}`);

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

@@ -10,7 +10,7 @@ class ComputedPlugin implements ConfigPlugin {
 
   async exec(config: JssConfig) {
     return Object.assign({}, config, {
-      graphQLEndpoint: `${config.sitecoreApiHost}${config.graphQLEndpointPath}`,
+      graphQLEndpoint: config.graphQLEndpoint || `${config.sitecoreApiHost}${config.graphQLEndpointPath}`,
     });
   }
 }

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

@@ -0,0 +1,19 @@
+import { ConfigPlugin, JssConfig } from '..';
+
+/**
+ * This config will set fallback values for properties that were left empty
+ * If neither env, nor other places had a proper value, this will ensure a fallback is set
+ */
+class FallbackPlugin implements ConfigPlugin {
+  // should always comes last
+  order = 99;
+
+  async exec(config: JssConfig) {
+    return Object.assign({}, config, {
+      defaultLanguage: config.defaultLanguage || 'en',
+      sitecoreApiKey: config.sitecoreApiKey || 'no-api-key-set'
+    });
+  }
+}
+
+export const fallbackPlugin = new FallbackPlugin();

packages/create-sitecore-jss/src/templates/nextjs/scripts/config/plugins/package-json.ts

@@ -11,9 +11,9 @@ class PackageJsonPlugin implements ConfigPlugin {
     if (!packageConfig.config) return config;
 
     return Object.assign({}, config, {
-      jssAppName: packageConfig.config.appName,
-      graphQLEndpointPath: packageConfig.config.graphQLEndpointPath,
-      defaultLanguage: packageConfig.config.language,
+      jssAppName: config.jssAppName || packageConfig.config.appName,
+      graphQLEndpointPath: config.graphQLEndpointPath || packageConfig.config.graphQLEndpointPath,
+      defaultLanguage: config.defaultLanguage || packageConfig.config.language,
     });
   }
 }

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

@@ -19,8 +19,8 @@ class ScJssConfigPlugin implements ConfigPlugin {
     if (!scJssConfig) return config;
 
     return Object.assign({}, config, {
-      sitecoreApiKey: scJssConfig.sitecore?.apiKey,
-      sitecoreApiHost: scJssConfig.sitecore?.layoutServiceHost,
+      sitecoreApiKey: config.sitecoreApiKey || scJssConfig.sitecore?.apiKey,
+      sitecoreApiHost: config.sitecoreApiHost || scJssConfig.sitecore?.layoutServiceHost,
     });
   }
 }

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

@@ -10,11 +10,11 @@ import { JssConfig, jssConfigFactory } from './config';
 */
 
 const defaultConfig: JssConfig = {
-  sitecoreApiKey: 'no-api-key-set',
-  sitecoreApiHost: '',
-  jssAppName: 'Unknown',
-  graphQLEndpointPath: '',
-  defaultLanguage: 'en',
+  sitecoreApiKey: process.env[`${constantCase('sitecoreApiKey')}`],
+  sitecoreApiHost: process.env[`${constantCase('sitecoreApiHost')}`],
+  jssAppName: process.env[`${constantCase('jssAppName')}`],
+  graphQLEndpointPath: process.env[`${constantCase('graphQLEndpointPath')}`],
+  defaultLanguage: process.env[`${constantCase('defaultLanguage')}`],
 };
 
 generateConfig(defaultConfig);