Frontend - Caching for Webnode (#865)

Author: directcuteo

frontend/docker/startup.sh

@@ -79,35 +79,60 @@ download_wasm_files() {
         echo "Error: OPENMINA_WASM_VERSION is not set. Exiting."
         exit 1
     fi
-    
+
     WASM_URL="$OPENMINA_BASE_URL/openmina/releases/download/$OPENMINA_WASM_VERSION/openmina-$OPENMINA_WASM_VERSION-webnode-wasm.tar.gz"
     TARGET_DIR="/usr/local/apache2/htdocs/assets/webnode/pkg"
-    
+
     mkdir -p "$TARGET_DIR"
 
     echo "Downloading WASM files from $WASM_URL..."
     curl -s -L --retry 3 --retry-delay 5 -o "/tmp/openmina-$OPENMINA_WASM_VERSION-webnode-wasm.tar.gz" "$WASM_URL"
-    
+
     if [[ $? -ne 0 ]]; then
         echo "Failed to download the WASM file after 3 attempts, exiting."
         exit 1
     else
         echo "WASM file downloaded successfully. Extracting to $TARGET_DIR..."
 
         tar -xzf "/tmp/openmina-$OPENMINA_WASM_VERSION-webnode-wasm.tar.gz" -C "$TARGET_DIR"
-        
+
         # Check if the extraction was successful
         if [[ $? -ne 0 ]]; then
             echo "Failed to extract the WASM file, exiting."
             exit 1
         else
             echo "WASM files extracted successfully to $TARGET_DIR"
+
+            # Inject caching logic into openmina_node_web.js
+            OPENMINA_JS="$TARGET_DIR/openmina_node_web.js"
+            inject_caching_logic "$OPENMINA_JS"
         fi
     fi
 
     rm "/tmp/openmina-$OPENMINA_WASM_VERSION-webnode-wasm.tar.gz"
 }
 
+inject_caching_logic() {
+  local js_file="$1"
+  if [ -f "$js_file" ]; then
+    echo "Injecting caching logic into $js_file"
+
+    # Generate a unique hash
+    local hash=$(openssl rand -hex 8)
+
+    sed -i "/module_or_path = fetch(module_or_path);/i\    module_or_path += \"\?v=${hash}\";" "$js_file"
+    sed -i 's/module_or_path = fetch(module_or_path);/module_or_path = fetch(module_or_path, { cache: "force-cache", headers: { "Cache-Control": "max-age=31536000, immutable" } });/' "$js_file"
+    if [[ $? -ne 0 ]]; then
+      echo "Failed to inject caching logic into $js_file"
+    else
+      echo "Successfully injected caching logic into $js_file"
+    fi
+  else
+    echo "Warning: $js_file not found. Caching logic not injected."
+  fi
+}
+
+
 if [ -n "$OPENMINA_FRONTEND_ENVIRONMENT" ]; then
   echo "Using environment: $OPENMINA_FRONTEND_ENVIRONMENT"
   cp -f /usr/local/apache2/htdocs/assets/environments/"$OPENMINA_FRONTEND_ENVIRONMENT".js \

frontend/httpd.conf

@@ -228,6 +228,31 @@ SSLProxyEngine On
 </Location>
 
 <IfModule unixd_module>
+
+# Define development environments
+SetEnvIf Host "localhost|127.0.0.1" DEVELOPMENT
+
+# Cache rules for WebNode assets
+<LocationMatch "/assets/webnode/pkg/openmina_node_web\.js">
+    # Development environment - no cache
+    Header set Cache-Control "no-store, no-cache, must-revalidate" env=DEVELOPMENT
+
+    # Production environment - aggressive caching
+    Header set Cache-Control "public, max-age=31536000, immutable" env=!DEVELOPMENT
+</LocationMatch>
+<LocationMatch "/assets/webnode/pkg/openmina_node_web_bg\.wasm">
+    # Development environment - no cache
+    Header set Cache-Control "no-store, no-cache, must-revalidate" env=DEVELOPMENT
+
+    # Production environment - aggressive caching
+    Header set Cache-Control "public, max-age=31536000, immutable" env=!DEVELOPMENT
+</LocationMatch>
+
+# Make sure mod_headers is enabled
+<IfModule !mod_headers.c>
+    LoadModule headers_module modules/mod_headers.so
+</IfModule>
+
 #
 # If you wish httpd to run as a different user or group, you must run
 # httpd as root initially and it will switch.

frontend/package.json

@@ -6,11 +6,12 @@
     "start": "npm install && ng serve --configuration local --open",
     "start:dev": "ng serve --configuration development",
     "build": "ng build",
-    "build:prod": "ng build --configuration production",
+    "build:prod": "npm run prebuild && ng build --configuration production",
     "tests": "npx cypress open --config baseUrl=http://localhost:4200",
     "tests:headless": "npx cypress run --headless --config baseUrl=http://localhost:4200",
     "docker": "npm run build:prod && docker buildx build --platform linux/amd64 -t openmina/frontend:latest . && docker push openmina/frontend:latest",
-    "start:bundle": "npx http-server dist/frontend -p 4200"
+    "start:bundle": "npx http-server dist/frontend -p 4200",
+    "prebuild": "node scripts/update-webnode-version.js"
   },
   "private": true,
   "dependencies": {

frontend/scripts/update-webnode-version.js

@@ -0,0 +1,21 @@
+const fs = require('fs');
+const crypto = require('crypto');
+
+// Generate a random hash
+const hash = crypto.randomBytes(16).toString('hex'); // Generates a 32-character random hex string
+
+// Read and update index.html
+const indexPath = './src/index.html';
+let indexHtml = fs.readFileSync(indexPath, 'utf8');
+
+// Enhanced Regex Pattern
+// Match 'const WEBNODE_VERSION = ' with optional whitespace around the equals and between quotes
+const versionRegex = /const\s+WEBNODE_VERSION\s*=\s*['"][^'"]*['"];/;
+
+// Perform replacement
+indexHtml = indexHtml.replace(versionRegex, `const WEBNODE_VERSION = '${hash}';`);
+
+// Write updated content to index.html
+fs.writeFileSync(indexPath, indexHtml);
+
+console.log(`Updated WEBNODE_VERSION in ${indexPath} to ${hash}`);

frontend/src/index.html

@@ -42,11 +42,15 @@
 
 <body class="f-base">
 <script type="module">
-  import('./assets/webnode/pkg/openmina_node_web.js')
+  // Get version from build-time replaced variable or from meta tag
+  // This will be replaced during build (don't change this line!!)
+  const WEBNODE_VERSION = '13b85f46d3496a8608a86c8af21374bf';
+  const webNodeUrl = `./assets/webnode/pkg/openmina_node_web.js?v=${WEBNODE_VERSION}`;
+
+  import(webNodeUrl)
     .then((v) => {
       window.webnode = v;
-      const event = new CustomEvent('webNodeLoaded');
-      window.dispatchEvent(event);
+      window.dispatchEvent(new CustomEvent('webNodeLoaded'));
     })
     .catch((error) => {
       if (window.env?.configs.some(c => c.isWebNode)) {