Fix/dev mode hot reload (#5550)

* test: add comprehensive unit tests for loader.js

- Add test coverage for requirejs configuration
- Test i18next initialization and language switching
- Mock external dependencies (i18next, requirejs-plugins)
- Handle async initialization logic

* style: fix formatting in loader.test.js

* style: update copyright year to 2026

* style: run prettier on loader.test.js

* fix: Implement environment-aware caching for instant dev hot reload

- Disable service worker registration on localhost for development
- Add environment detection (NODE_ENV) for cache control
- Set no-cache headers in development mode (maxAge: 0)
- Maintain full PWA functionality in production
- Add cross-env for cross-platform environment variable support
- Add separate dev/prod npm scripts

This fixes the issue where code changes required multiple refreshes
or hard refreshes to appear due to aggressive service worker and
browser caching. Changes now reflect instantly on refresh during
development while maintaining production performance.

Closes #[issue-number]

* chore: Add package-lock.json with cross-env dependency

* style: Run Prettier on index.js to fix formatting

* refactor: Simplify server startup logging to minimal output

Author: Ashutoshx7

index.html

@@ -558,21 +558,37 @@
     </script>
 
     <script>
+        // Register service worker only in production (not on localhost)
         if ("serviceWorker" in navigator) {
-            if (navigator.serviceWorker.controller) {
-                console.debug(
-                    "[PWA Builder] active service worker found, no need to register"
-                );
+            // Detect if running on localhost for development
+            const isLocalDev = window.location.hostname === "localhost" ||
+                window.location.hostname === "127.0.0.1";
+
+            if (!isLocalDev) {
+                // Production: Register service worker for offline mode
+                if (navigator.serviceWorker.controller) {
+                    console.debug(
+                        "[PWA Builder] Active service worker found, no need to register"
+                    );
+                } else {
+                    // Register the service worker
+                    navigator.serviceWorker
+                        .register("/sw.js")
+                        .then(function (reg) {
+                            console.debug(
+                                "[PWA Builder] Service worker registered for scope: " +
+                                reg.scope
+                            );
+                        })
+                        .catch(function (err) {
+                            console.error("[PWA Builder] Service worker registration failed:", err);
+                        });
+                }
             } else {
-                // Register the service worker
-                navigator.serviceWorker
-                    .register("/sw.js")
-                    .then(function (reg) {
-                        console.debug(
-                            "[PWA Builder] Service worker has been registered for scope: " +
-                            reg.scope
-                        );
-                    });
+                // Development: Skip service worker for instant updates
+                console.log(
+                    "🔥 [DEV MODE] Service worker disabled on localhost for instant code updates"
+                );
             }
         }
     </script>

index.js

@@ -4,6 +4,9 @@ const path = require("path");
 
 const app = express();
 
+// Detect environment (default to development for safety)
+const isDev = process.env.NODE_ENV !== "production";
+
 // Enable compression for all responses
 app.use(
     compression({
@@ -12,9 +15,26 @@ app.use(
     })
 );
 
+// Environment-aware static file serving
 app.use(
     express.static(path.join(__dirname), {
-        maxAge: "1h"
+        // Disable caching in development, enable in production
+        maxAge: isDev ? 0 : "1h",
+        etag: isDev ? false : true,
+        lastModified: isDev ? false : true,
+
+        // Set explicit no-cache headers in development
+        setHeaders: (res, filePath) => {
+            if (isDev) {
+                res.setHeader(
+                    "Cache-Control",
+                    "no-store, no-cache, must-revalidate, proxy-revalidate"
+                );
+                res.setHeader("Pragma", "no-cache");
+                res.setHeader("Expires", "0");
+                res.setHeader("Surrogate-Control", "no-store");
+            }
+        }
     })
 );
 

package-lock.json

@@ -14,8 +14,10 @@
   "scripts": {
     "lint": "eslint js/ planet/js/",
     "serve": "http-server -a 127.0.0.1 -p 3000 --gzip --brotli",
+    "serve:dev": "http-server -a 127.0.0.1 -p 3000 -c-1",
     "start": "node index.js",
-    "dev": "nodemon index.js",
+    "dev": "cross-env NODE_ENV=development nodemon index.js",
+    "prod": "cross-env NODE_ENV=production node index.js",
     "test": "jest",
     "cypress:run": "cypress run",
     "electron": "electron .",
@@ -25,6 +27,7 @@
     "@babel/core": "^7.28.5",
     "@babel/eslint-parser": "^7.28.5",
     "@babel/preset-env": "^7.28.5",
+    "cross-env": "^7.0.3",
     "cypress": "^15.9.0",
     "electron": "40.0.0",
     "electron-builder": "26.4.0",