Avoid stale JavaScript caching

Author: Erikvv

.github/workflows/deploy.yaml

@@ -91,13 +91,22 @@ jobs:
                     registry: ghcr.io
                     username: ${{ github.actor }}
                     password: ${{ secrets.GITHUB_TOKEN }}
+            -   name: Calculcate browser cache key
+                id: browser-cache-key
+                uses: mathiasvr/command-output@v2.0.0
+                with:
+                    run: git rev-parse HEAD:frontend | cut -c 1-4
+            -   name: echo
+                run: echo ${{ steps.browser-cache-key.outputs.stdout }}
             -   name: Build and push
                 uses: docker/build-push-action@v6
                 with:
                     push: true
                     file: ./docker/production/frontend/Dockerfile
                     tags: ghcr.io/zenmo/zero-frontend:${{ needs.variables.outputs.VERSION_TAG }}
-                    build-args: VITE_ZTOR_URL=https://${{ vars.ZTOR_HOSTNAME || needs.variables.outputs.ZTOR_HOSTNAME }}
+                    build-args: |
+                        VITE_ZTOR_URL=https://${{ vars.ZTOR_HOSTNAME || needs.variables.outputs.ZTOR_HOSTNAME }}
+                        BROWSER_CACHE_KEY=${{ steps.browser-cache-key.outputs.stdout }}
                     cache-from: type=gha
                     cache-to: type=gha,mode=max
 

docker/production/frontend/Dockerfile

@@ -9,6 +9,7 @@ RUN --mount=type=cache,target=/home/gradle/.gradle/caches gradle joshi:jsBrowser
 
 FROM node:22 AS node
 ARG VITE_ZTOR_URL
+ARG BROWSER_CACHE_KEY
 
 RUN mkdir -p /app/frontend
 RUN mkdir -p /app/build/js/packages

frontend/package-lock.json

@@ -26,7 +26,7 @@
     "antd": "^5.11.3",
     "bootstrap": "5.3.3",
     "jest-environment-jsdom": "^29.6.3",
-    "joshi": "file:../build/js/packages/zero-joshi",
+    "joshi": "file:../build/js/packages/zeroweb-joshi",
     "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
     "memoize-immutable": "^3.0.0",
@@ -44,7 +44,7 @@
     "react-use-promise": "^0.5.0",
     "typescript": "^5.1.6",
     "web-vitals": "^2.1.4",
-    "zero-zummon": "file:../build/js/packages/zero-zummon"
+    "zero-zummon": "file:../build/js/packages/zeroweb-zummon"
   },
   "scripts": {
     "start": "vite --host 0.0.0.0",

frontend/package.json

@@ -1,5 +1,13 @@
 import {defineConfig} from "vite"
 import react from "@vitejs/plugin-react"
+import {execSync} from "child_process"
+
+// Put hash in file name so that the users don't get stale JS from their browser cache.
+let browserCacheKey = process.env.BROWSER_CACHE_KEY
+if (!browserCacheKey) {
+    browserCacheKey = execSync("git rev-parse HEAD:frontend").toString().trim()
+        .slice(0, 4)
+}
 
 export default defineConfig({
     plugins: [react({ jsxImportSource: '@emotion/react' })],
@@ -8,12 +16,13 @@ export default defineConfig({
         port: 3000,
     },
     build: {
-        minify: false,
+        // minify: false,
         rollupOptions: {
+            // Tree shaking seems too aggressive on the KotlinJS code
             treeshake: false,
             output: {
-                entryFileNames: "[name].js",
-                assetFileNames: '[name].css',
+                entryFileNames: `[name].${browserCacheKey}.js`,
+                assetFileNames: `[name].${browserCacheKey}.css`,
             },
         },
     },

frontend/vite.config.ts

@@ -21,7 +21,7 @@ kotlin {
         binaries.library()
         compilations["main"].packageJson {
             // hack hack hack
-            types = "kotlin/zero-joshi.d.ts"
+            types = "kotlin/zeroweb-joshi.d.ts"
         }
         browser {
         }

joshi/build.gradle.kts

@@ -22,7 +22,7 @@ kotlin {
         binaries.library()
         compilations["main"].packageJson {
             // hack hack hack
-            types = "kotlin/zero-zummon.d.ts"
+            types = "kotlin/zeroweb-zummon.d.ts"
         }
         browser {
         }