fix: frontend cache issue

Author: sunjay-dev

backend/src/app.ts

@@ -7,6 +7,7 @@ import passport from "./config/passport.config.js";
 import errorHandler from "./middlewares/errorHandler.middlewares.js";
 import { requestLogger } from "./middlewares/requestLogger.middlewares.js";
 import routes from "./api.routes.js";
+import { serveFrontend } from "./static/serveFrontend.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -21,20 +22,10 @@ app.use(requestLogger);
 app.use(passport.initialize());
 app.use(express.json());
 app.use(cookieParser());
-app.use(express.static(clientDistPath));
 
 app.use("/api/v1", routes);
 
-app.get("/*splat", (req, res, next) => {
-  if (req.path.startsWith("/api/")) {
-    return next();
-  }
-  res.sendFile(path.join(clientDistPath, "index.html"), (err) => {
-    if (err) {
-      next();
-    }
-  });
-});
+serveFrontend(app, clientDistPath);
 
 app.use(errorHandler);
 

backend/src/static/serveFrontend.ts

@@ -0,0 +1,35 @@
+import express from "express";
+import path from "path";
+
+export function serveFrontend(app: express.Express, clientDistPath: string) {
+  app.use(
+    "/assets",
+    express.static(path.join(clientDistPath, "assets"), {
+      immutable: true,
+      maxAge: "1y",
+      etag: false,
+    }),
+  );
+
+  app.use(
+    express.static(clientDistPath, {
+      etag: false,
+      maxAge: 0,
+      setHeaders(res, filePath) {
+        if (filePath.endsWith(".html")) {
+          res.setHeader("Cache-Control", "public, max-age=0, must-revalidate");
+        }
+      },
+    }),
+  );
+
+  app.get("/*splat", (_req, res, next) => {
+    res.setHeader("Cache-Control", "public, max-age=0, must-revalidate");
+
+    res.sendFile(path.join(clientDistPath, "index.html"), (err) => {
+      if (err) {
+        next(err);
+      }
+    });
+  });
+}