Ensure app config variables have values at build-time

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

@@ -13,12 +13,23 @@ class MultisitePlugin implements ConfigPlugin {
 
   async exec(config: JssConfig) {
     let sites: SiteInfo[] = [];
-    const endpoint = process.env.GRAPH_QL_ENDPOINT || config.graphQLEndpoint;
+
+    const computeConfigValue = (val: string) => {
+      if(val.startsWith('`') && val.endsWith('`')) {
+        return new Function('return ' + val.replaceAll('config', 'this')).call(config);
+      }
+      else {
+        return val;
+      }
+    };
+
+    // graphQL endpoint can have a dynamic value in the config - so we resolve it in a special way at build time
+    const endpoint = process.env.GRAPH_QL_ENDPOINT || computeConfigValue(config.computed?.graphQLEndpoint || '');
     const apiKey = process.env.SITECORE_API_KEY || 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 connection details). Endpoint or API key missing.')
       );
     } else {
       console.log(`Fetching site information from ${endpoint}`);

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

@@ -4,13 +4,15 @@ const plugins = require('scripts/temp/config-plugins');
 /**
  * JSS configuration object
  */
-export interface JssConfig extends Record<string, string | undefined> {
+export interface JssConfig extends Record<string, string | Record<string, string> | undefined> {
   sitecoreApiKey?: string;
   sitecoreApiHost?: string;
   jssAppName?: string;
   graphQLEndpointPath?: string;
   defaultLanguage?: string;
-  graphQLEndpoint?: string;
+  computed?: {
+    [key: string]: string;
+  }
 }
 
 export interface ConfigPlugin {

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}`,
+      computed: { graphQLEndpoint: '`${config.sitecoreApiHost}${config.graphQLEndpointPath}`' },
     });
   }
 }

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

@@ -13,7 +13,11 @@ class ScJssConfigPlugin implements ConfigPlugin {
     try {
       scJssConfig = require('scjssconfig.json');
     } catch (e) {
-      return config;
+      // fall back on env values
+      return Object.assign({}, config, {
+        sitecoreApiKey: process.env.SITECORE_API_KEY,
+        sitecoreApiHost: process.env.SITECORE_API_HOST,
+      });
     }
 
     if (!scJssConfig) return config;

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

@@ -47,10 +47,17 @@ function writeConfig(config: JssConfig): void {
 // See scripts/bootstrap.ts to modify the generation of this file.
 const config = {};\n`;
 
+  const computedConfig = config.computed;
+  delete config['computed'];
   // Set configuration values, allowing override with environment variables
   Object.keys(config).forEach((prop) => {
     configText += `config.${prop} = process.env.${constantCase(prop)} || '${config[prop]}',\n`;
   });
+  computedConfig && Object.keys(computedConfig).forEach((prop) => {
+    configText += `config.${prop} = process.env.${constantCase(prop)} || ${
+      computedConfig[prop]
+    };\n`;
+  });
   configText += `module.exports = config;`;
 
   const configPath = path.resolve('src/temp/config.js');