fix: autoreload stuff in case if frontend build is changed

frontend/.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 public/build/
+public/index.html
 dist/
 coverage/
 test-results/

frontend/nginx.conf.template

@@ -85,11 +85,6 @@ server {
         expires 1y;
     }
 
-    # Cache build directory assets with long expiry
-    location /build/ {
-        expires 1y;
-    }
-
     # HTML files should not be cached
     location ~* \.html$ {
         expires -1;

frontend/package.json

@@ -52,6 +52,7 @@
     "@playwright/test": "^1.58.2",
     "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-html": "^2.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.1",
@@ -79,6 +80,7 @@
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.5.1",
     "rollup": "^4.59.0",
+    "rollup-plugin-cleandir": "^3.0.0",
     "rollup-plugin-css-only": "^4.3.0",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-postcss": "^4.0.2",

frontend/rollup.config.js

@@ -8,10 +8,13 @@ import replace from '@rollup/plugin-replace';
 import typescript from '@rollup/plugin-typescript';
 import alias from '@rollup/plugin-alias';
 import dotenv from 'dotenv';
-import fs from 'fs';
-import https from 'https';
-import path from 'path';
+import crypto from 'node:crypto';
+import fs from 'node:fs';
+import https from 'node:https';
+import path from 'node:path';
 import json from '@rollup/plugin-json';
+import html from '@rollup/plugin-html';
+import { cleandir } from 'rollup-plugin-cleandir';
 
 // Path aliases - must match tsconfig.json paths
 const projectRoot = path.resolve('.');
@@ -134,7 +137,9 @@ export default {
         sourcemap: !production,
         format: 'es',
         name: 'app',
-        dir: 'public/build',
+        dir: 'public',
+        entryFileNames: production ? 'build/[name]-[hash].js' : 'build/[name].js',
+        chunkFileNames: 'build/[name]-[hash].js',
         manualChunks: {
             'vendor': [
                 'svelte',
@@ -175,7 +180,7 @@ export default {
             }
         }),
         postcss({
-            extract: 'bundle.css',
+            extract: 'build/bundle.css',
             minimize: false,
         }),
         typescript({
@@ -199,6 +204,33 @@ export default {
                 startServer();
             }
         },
+        production && cleandir('public/build', { hook: 'generateBundle' }),
+        production && {
+            name: 'css-hash',
+            generateBundle(_, bundle) {
+                const css = bundle['build/bundle.css'];
+                if (!css) return;
+                const hash = crypto.createHash('sha256').update(css.source).digest('hex').slice(0, 8);
+                const name = `build/bundle-${hash}.css`;
+                css.fileName = name;
+                bundle[name] = css;
+                delete bundle['build/bundle.css'];
+            },
+        },
+        html({
+            template({ bundle }) {
+                let tmpl = fs.readFileSync('src/index.html', 'utf-8');
+                const entryChunk = Object.values(bundle).find(f => f.type === 'chunk' && f.isEntry);
+                const cssAsset = Object.values(bundle).find(f => f.type === 'asset' && f.fileName.endsWith('.css'));
+                if (cssAsset) {
+                    tmpl = tmpl.replace('</head>', `    <link rel="stylesheet" href="/${cssAsset.fileName}">\n</head>`);
+                }
+                if (entryChunk) {
+                    tmpl = tmpl.replace('</body>', `    <script nonce="**CSP_NONCE**" type="module" src="/${entryChunk.fileName}"></script>\n</body>`);
+                }
+                return tmpl;
+            },
+        }),
         production && terser({
             ecma: 2020,
             module: true,

frontend/public/index.html → frontend/src/index.html

@@ -30,20 +30,17 @@
         .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
         @keyframes spin { to { transform: rotate(360deg); } }
     </style>
-
-    <link rel="stylesheet" href="/build/bundle.css">
-    <script nonce="**CSP_NONCE**" type="module" src='/build/main.js'></script>
 </head>
 
 <body>
     <div id="app-loading" class="app-loading" role="status" aria-live="polite" aria-busy="true">
         <div class="app-loading-inner">
             <div class="app-loading-spinner" aria-hidden="true"></div>
             <span class="sr-only">Loading…</span>
         </div>
     </div>
     <script nonce="**CSP_NONCE**">
         window.addEventListener('DOMContentLoaded', () => {
             setTimeout(() => {
                 const loader = document.getElementById('app-loading');
                 if (loader) loader.classList.add('app-loading-hidden');