Fix: npm dev/prod environment handling (sugarlabs#5696)

* fix development and production environment handling

* Add cache disabling in Planet for dev mode

* Add env.js file to support static hosting of MB

Author: farhan-momin

env.js

@@ -0,0 +1,3 @@
+// File for static Musicblocks hosting e.g. https://sugarlabs.github.io/musicblocks/
+window.MB_ENV = "production";
+window.MB_IS_DEV = false;

index.html

@@ -107,8 +107,8 @@
         });
     </script>
     <script src="lib/astring.min.js" defer></script>
-
     <script src="lib/acorn.min.js" defer></script>
+    <script src="env.js"></script>
 
 
     <script data-main="js/loader" src="lib/require.js" defer></script>
@@ -577,13 +577,15 @@
     <script>
         // Register service worker only in production (not on localhost)
         if ("serviceWorker" in navigator) {
-            // Detect if running on localhost for development
-            const isLocalDev = window.location.hostname === "localhost" ||
-                window.location.hostname === "127.0.0.1";
+
             // Localhost SW is disabled to avoid caching; set allowLocalPwa to test installs.
             const allowLocalPwa = localStorage.getItem("allowLocalPwa") === "true";
 
-            if (!isLocalDev || allowLocalPwa) {
+            // Detect if running on localhost for development
+            const runtimeEnv = window.MB_ENV
+            const isDevMode = runtimeEnv !== "production";
+
+            if (!isDevMode || allowLocalPwa) {
                 // Production: Register service worker for offline mode
                 if (navigator.serviceWorker.controller) {
                     console.debug(
@@ -606,7 +608,7 @@
             } else {
                 // Development: Skip service worker for instant updates
                 console.log(
-                    "🔥 [DEV MODE] Service worker disabled on localhost for instant code updates"
+                    "🔥 [DEV MODE] Service worker disabled for instant code updates"
                 );
                 console.log(
                     "Set localStorage.allowLocalPwa = 'true' to enable PWA install testing on localhost."

index.js

@@ -7,6 +7,19 @@ const app = express();
 // Detect environment (default to development for safety)
 const isDev = process.env.NODE_ENV !== "production";
 
+// runtime environment for browser
+app.get("/env.js", (req, res) => {
+    res.type("application/javascript");
+    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");
+    res.send(
+        `window.MB_ENV=${JSON.stringify(process.env.NODE_ENV || "development")};` +
+            `window.MB_IS_DEV=${JSON.stringify(isDev)};`
+    );
+});
+
 // Enable compression for all responses
 app.use(
     compression({

planet/index.html

@@ -24,6 +24,7 @@
     <script type="text/javascript" src="libs/jquery-3.7.1.min.js"></script>
     <script type="text/javascript" src="libs/materialize.min.js"></script>
     <script type="text/javascript" src="libs/localforage.min.js"></script>
+    <script type="text/javascript" src="../env.js"></script>
 
     <script type="text/javascript" src="js/helper.js"></script>
     <script type="text/javascript" src="js/StringHelper.js"></script>

planet/js/ServerInterface.js

@@ -28,6 +28,7 @@ class ServerInterface {
         this.ServerURL = "https://musicblocks.sugarlabs.org/planet-server/index.php";
         this.ConnectionFailureData = { success: false, error: "ERROR_CONNECTION_FAILURE" };
         this.APIKey = "3f2d3a4c-c7a4-4c3c-892e-ac43784f7381";
+        this.disablePlanetCache = this.shouldDisablePlanetCache();
 
         // Initialize RequestManager for rate limiting and retry logic
         this.requestManager = new RequestManager({
@@ -48,6 +49,20 @@ class ServerInterface {
         this.cacheInitialized = false;
     }
 
+    /**
+     * Determines whether Planet caching should be disabled.
+     * @returns {boolean}
+     */
+    shouldDisablePlanetCache() {
+        const runtimeEnv = window.MB_ENV;
+
+        if (runtimeEnv === "production") {
+            return false;
+        }
+
+        return true;
+    }
+
     /**
      * Initializes the cache manager
      * @returns {Promise<boolean>}
@@ -149,23 +164,24 @@ class ServerInterface {
      * Gets project details with caching support
      */
     async getProjectDetails(ProjectID, callback) {
-        // Try cache first
-        await this.initCache();
-        const cached = await this.cacheManager.getMetadata(ProjectID);
-
-        if (cached) {
-            // eslint-disable-next-line no-console
-            console.debug("[ServerInterface] Returning cached metadata for:", ProjectID);
-            callback({ success: true, data: cached });
-            return;
+        if (!this.disablePlanetCache) {
+            // Try cache first
+            await this.initCache();
+            const cached = await this.cacheManager.getMetadata(ProjectID);
+
+            if (cached) {
+                // eslint-disable-next-line no-console
+                console.debug("[ServerInterface] Returning cached metadata for:", ProjectID);
+                callback({ success: true, data: cached });
+                return;
+            }
         }
-
         // Fetch from server
         const obj = { action: "getProjectDetails", ProjectID: ProjectID };
 
         this.throttledRequest(obj, async result => {
             // Cache successful responses
-            if (result && result.success && result.data) {
+            if (!this.disablePlanetCache && result && result.success && result.data) {
                 await this.cacheManager.cacheMetadata(ProjectID, result.data);
             }
             callback(result);
@@ -190,23 +206,24 @@ class ServerInterface {
      * Downloads full project data with caching support
      */
     async downloadProject(ProjectID, callback) {
-        // Try cache first
-        await this.initCache();
-        const cached = await this.cacheManager.getProject(ProjectID);
-
-        if (cached) {
-            // eslint-disable-next-line no-console
-            console.debug("[ServerInterface] Returning cached project:", ProjectID);
-            callback({ success: true, data: cached });
-            return;
+        if (!this.disablePlanetCache) {
+            // Try cache first
+            await this.initCache();
+            const cached = await this.cacheManager.getProject(ProjectID);
+
+            if (cached) {
+                // eslint-disable-next-line no-console
+                console.debug("[ServerInterface] Returning cached project:", ProjectID);
+                callback({ success: true, data: cached });
+                return;
+            }
         }
-
         // Fetch from server
         const obj = { action: "downloadProject", ProjectID: ProjectID };
 
         this.throttledRequest(obj, async result => {
             // Cache successful responses
-            if (result && result.success && result.data) {
+            if (!this.disablePlanetCache && result && result.success && result.data) {
                 await this.cacheManager.cacheProject(ProjectID, result.data);
             }
             callback(result);
@@ -271,8 +288,14 @@ class ServerInterface {
      * Initializes the server interface
      */
     async init() {
-        await this.initCache();
+        if (!this.disablePlanetCache) {
+            await this.initCache();
+        }
         // eslint-disable-next-line no-console
-        console.debug("[ServerInterface] Initialized with rate limiting and caching");
+        console.debug(
+            `[ServerInterface] Initialized with rate limiting and ${
+                this.disablePlanetCache ? "cache disabled (dev mode)" : "caching"
+            }`
+        );
     }
 }