Optimize build for Azure Front Door with cache-busting

- Configure Vite for optimal cache-busting with content-based hashes
- Generate unique filenames for JS/CSS: assets/[name]-[hash].[ext]
- Organize images with hash: assets/images/[name]-[hash].[ext]
- Update nginx config with proper cache headers for Front Door:
  * 1 year cache for hashed assets (immutable)
  * 30 days cache for non-hashed static assets
  * No cache for HTML files
- Support ES2022 target for modern browsers with top-level await
- Enable source maps for debugging
- Add Azure Front Door documentation

This ensures:
✅ Automatic cache invalidation on new deployments
✅ Optimal CDN performance with long cache times
✅ No manual cache purging needed
✅ Browser always gets latest version after deployment

Author: mbertelsen

editor/AZURE-FRONTDOOR.md

@@ -0,0 +1,40 @@
+# Azure Front Door Cache Configuration
+
+This application is optimized for Azure Front Door with proper cache-busting and CDN configuration.
+
+## Cache Strategy
+
+### Immutable Assets (Long Cache - 1 year)
+- **JavaScript**: `/assets/*-[hash].js` - Cached for 1 year with `immutable` flag
+- **CSS**: `/assets/*-[hash].css` - Cached for 1 year with `immutable` flag  
+- **Images**: `/assets/images/*-[hash].*` - Cached for 1 year with `immutable` flag
+
+### Semi-Static Assets (Medium Cache - 30 days)
+- **Images without hash**: `*.png, *.jpg, *.svg` etc. - Cached for 30 days
+
+### Dynamic Content (No Cache)
+- **HTML**: `*.html` - Never cached, always fresh from origin
+- **Service Worker**: Always fresh
+
+## Build Process
+
+Every build generates:
+- Unique filenames with content-based hashes
+- Source maps for debugging
+- Optimized bundles for modern browsers (ES2022)
+
+## Azure Front Door Benefits
+
+1. **Automatic Cache Invalidation**: New builds get new filenames, so no manual cache purging
+2. **Global CDN**: Assets served from edge locations worldwide
+3. **Compression**: Gzip/Brotli compression for smaller payloads
+4. **HTTP/2**: Faster loading with multiplexed connections
+
+## Build Version Indicator
+
+The app includes a build version indicator in the top-right corner showing:
+- Version number
+- Git commit hash (7 chars)
+- Build timestamp
+
+This helps verify which version is currently deployed and when cache updates take effect.

editor/nginx.conf

@@ -17,10 +17,30 @@ http {
             try_files $uri $uri/ /index.html;
         }
 
-        # Cache static assets
-        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+        # Cache hashed assets (JS/CSS with hash in filename) - long cache
+        location ~* /assets/.*-[a-f0-9]+\.(js|css)$ {
             expires 1y;
             add_header Cache-Control "public, immutable";
+            add_header X-Content-Type-Options "nosniff";
+        }
+
+        # Cache images with hash - long cache
+        location ~* /assets/images/.*-[a-f0-9]+\.(png|jpg|jpeg|gif|ico|svg|webp)$ {
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+        }
+
+        # Cache other static assets without hash - shorter cache
+        location ~* \.(png|jpg|jpeg|gif|ico|svg|webp)$ {
+            expires 30d;
+            add_header Cache-Control "public";
+        }
+
+        # Don't cache the main HTML file
+        location ~* \.html$ {
+            expires -1;
+            add_header Cache-Control "no-cache, no-store, must-revalidate";
+            add_header Pragma "no-cache";
         }
     }
 }

editor/vite.config.ts

@@ -4,4 +4,27 @@ import react from '@vitejs/plugin-react';
 export default defineConfig({
   plugins: [react()],
   root: '.',
+  build: {
+    // Ensure proper cache-busting for Azure Front Door
+    rollupOptions: {
+      output: {
+        // Generate unique filenames with hash for cache-busting
+        entryFileNames: 'assets/[name]-[hash].js',
+        chunkFileNames: 'assets/[name]-[hash].js',
+        assetFileNames: (assetInfo) => {
+          // Keep images in their own folder with hash
+          if (assetInfo.name?.match(/\.(png|jpe?g|svg|gif|webp|ico)$/i)) {
+            return 'assets/images/[name]-[hash][extname]';
+          }
+          // CSS and other assets with hash
+          return 'assets/[name]-[hash][extname]';
+        },
+      },
+    },
+    // Ensure proper source maps for debugging
+    sourcemap: true,
+    // Optimize for Azure Front Door (support top-level await)
+    target: 'es2022',
+    minify: 'esbuild',
+  },
 });