web/index.html

@@ -7,6 +7,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=WDXL+Lubrifont+TC&display=swap" rel="stylesheet">
     <script src="/hmr-runtime-inject.js"></script>
+    <script>window.APP_VERSION = "__appVersion__";</script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ShiftSync</title>
   </head>

web/src/router/AppRouter.jsx

@@ -69,6 +69,16 @@ const AppRouter = () => {
   };
 
   useEffect(() => {
+    const localVersion = localStorage.getItem("APP_VERSION");
+    const currentVersion = window.APP_VERSION;
+
+    if (localVersion && localVersion !== currentVersion) {
+      console.log("Version changed, forcing reload");
+      localStorage.setItem("APP_VERSION", currentVersion);
+      window.location.reload(true); // force full page reload
+    } else {
+      localStorage.setItem("APP_VERSION", currentVersion);
+    }
     
     fetchAPI();
     // await call for getting the count of employees and any other calls to db.

web/vite.config.js

@@ -1,10 +1,20 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
+import pkg from './package.json';
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    {
+      name: 'html-transform',
+      transformIndexHtml(html) {
+        return html
+          .replace(/__appVersion__/g, pkg.version)
+      }
+    }
+  ],
   server:{
     host: true,
     allowedHosts: true,
@@ -21,4 +31,14 @@ export default defineConfig({
       '@components': path.resolve(__dirname, 'components')
     },
   },
+  build: {
+    assetsDir: 'assets',
+    rollupOptions: {
+      output: {
+        entryFileNames: `assets/[name].[hash].js`,
+        chunkFileNames: `assets/[name].[hash].js`,
+        assetFileNames: `assets/[name].[hash].[ext]`,
+      },
+    },
+  }
 });