Merge pull request #4927 from Infisical/feat/cache-fix-spa

feat: added spa cache control

Dockerfile.standalone-infisical

@@ -34,6 +34,7 @@ ENV VITE_POSTHOG_API_KEY $POSTHOG_API_KEY
 ARG INTERCOM_ID
 ENV VITE_INTERCOM_ID $INTERCOM_ID
 ARG INFISICAL_PLATFORM_VERSION
+ENV INFISICAL_PLATFORM_VERSION $INFISICAL_PLATFORM_VERSION
 ENV VITE_INFISICAL_PLATFORM_VERSION $INFISICAL_PLATFORM_VERSION
 ARG CAPTCHA_SITE_KEY
 ENV VITE_CAPTCHA_SITE_KEY $CAPTCHA_SITE_KEY

backend/src/server/plugins/serve-ui.ts

@@ -43,7 +43,9 @@ export const registerServeUI = async (
     const frontendPath = path.join(dir, frontendName);
     await server.register(staticServe, {
       root: frontendPath,
-      wildcard: false
+      wildcard: false,
+      maxAge: "30d",
+      immutable: true
     });
 
     server.route({
@@ -58,11 +60,12 @@ export const registerServeUI = async (
           return;
         }
 
-        // This should help avoid caching any chunks (temp fix)
+        return reply.sendFile("index.html", {
-        void reply.header("Cache-Control", "no-cache, no-store, must-revalidate, private, max-age=0");
+          immutable: false,
-        void reply.header("Pragma", "no-cache");
+          maxAge: 0,
-        void reply.header("Expires", "0");
+          lastModified: false,
-        return reply.sendFile("index.html");
+          etag: false
+        });
       }
     });
   }

frontend/src/index.css

@@ -1,9 +1,5 @@
 @import "tailwindcss";
 
-@import "@fontsource/inter/400.css" layer(base);
-@import "@fontsource/inter/500.css" layer(base);
-@import "@fontsource/inter/700.css" layer(base);
-
 @source not "../public";
 
 /*

frontend/src/main.tsx

@@ -12,6 +12,8 @@ import { NotFoundPage } from "./pages/public/NotFoundPage/NotFoundPage";
 // Import the generated route tree
 import { routeTree } from "./routeTree.gen";
 
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/500.css";
 import "@xyflow/react/dist/style.css";
 import "nprogress/nprogress.css";
 import "react-toastify/dist/ReactToastify.css";

frontend/vite.config.ts

@@ -23,6 +23,11 @@ const virtualRouteFileChangeReloadPlugin: PluginOption = {
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd());
   const allowedHosts = env.VITE_ALLOWED_HOSTS?.split(",") ?? [];
+  const version = (
+    env.INFISICAL_PLATFORM_VERSION ||
+    env.VITE_INFISICAL_PLATFORM_VERSION ||
+    "0.0.1"
+  ).replaceAll(".", "-");
 
   return {
     server: {
@@ -38,6 +43,15 @@ export default defineConfig(({ mode }) => {
       //   }
       // }
     },
+    build: {
+      rollupOptions: {
+        output: {
+          entryFileNames: `assets/[name]-${version}-[hash].js`,
+          chunkFileNames: `assets/[name]-${version}-[hash].js`,
+          assetFileNames: `assets/[name]-${version}-[hash].[ext]`
+        }
+      }
+    },
     plugins: [
       tsconfigPaths(),
       nodePolyfills({