Merge pull request #22267 from davidfestal/fix-cache-on-injected-config

Short-term fix to the frontend injected config caching

.changeset/shy-carrots-decide.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-app-backend': patch
+---
+
+Do not force caching of the Javascript asset that contains the injected config.

plugins/app-backend/src/lib/config.ts

@@ -31,7 +31,9 @@ type InjectOptions = {
 /**
  * Injects configs into the app bundle, replacing any existing injected config.
  */
-export async function injectConfig(options: InjectOptions) {
+export async function injectConfig(
+  options: InjectOptions,
+): Promise<string | undefined> {
   const { staticDir, logger, appConfigs } = options;
 
   const files = await fs.readdir(staticDir);
@@ -52,7 +54,7 @@ export async function injectConfig(options: InjectOptions) {
         injected,
       );
       await fs.writeFile(path, newContent, 'utf8');
-      return;
+      return path;
     } else if (content.includes('__APP_INJECTED_CONFIG_MARKER__')) {
       logger.info(`Replacing injected env config in ${jsFile}`);
 
@@ -61,10 +63,11 @@ export async function injectConfig(options: InjectOptions) {
         injected,
       );
       await fs.writeFile(path, newContent, 'utf8');
-      return;
+      return path;
     }
   }
   logger.info('Env config not injected');
+  return undefined;
 }
 
 type ReadOptions = {

plugins/app-backend/src/lib/headers.ts

@@ -16,3 +16,4 @@
 
 export const CACHE_CONTROL_NO_CACHE = 'no-store, max-age=0';
 export const CACHE_CONTROL_MAX_CACHE = 'public, max-age=1209600'; // 14 days
+export const CACHE_CONTROL_REVALIDATE_CACHE = 'no-cache'; // require revalidating cached responses before reuse them.

plugins/app-backend/src/service/router.ts

@@ -35,6 +35,7 @@ import {
 import {
   CACHE_CONTROL_MAX_CACHE,
   CACHE_CONTROL_NO_CACHE,
+  CACHE_CONTROL_REVALIDATE_CACHE,
 } from '../lib/headers';
 
 // express uses mime v1 while we only have types for mime v2
@@ -114,6 +115,7 @@ export async function createRouter(
 
   logger.info(`Serving static app content from ${appDistDir}`);
 
+  let injectedConfigPath: string | undefined;
   if (!disableConfigInjection) {
     const appConfigs = await readConfigs({
       config,
@@ -121,7 +123,7 @@ export async function createRouter(
       env: process.env,
     });
 
-    await injectConfig({ appConfigs, logger, staticDir });
+    injectedConfigPath = await injectConfig({ appConfigs, logger, staticDir });
   }
 
   const router = Router();
@@ -132,8 +134,12 @@ export async function createRouter(
   const staticRouter = Router();
   staticRouter.use(
     express.static(resolvePath(appDistDir, 'static'), {
-      setHeaders: res => {
-        res.setHeader('Cache-Control', CACHE_CONTROL_MAX_CACHE);
+      setHeaders: (res, path) => {
+        if (path === injectedConfigPath) {
+          res.setHeader('Cache-Control', CACHE_CONTROL_REVALIDATE_CACHE);
+        } else {
+          res.setHeader('Cache-Control', CACHE_CONTROL_MAX_CACHE);
+        }
       },
     }),
   );