docs: update electron build instructions and fix electron asset paths

- Add web build prerequisite step to electron build docs
- Update electron run command to use npx
- Fix electron asset loading with improved path handling
- Add request interception for proper asset resolution
- Remove service worker files from electron build
- Improve debug logging for electron builds

BUILDING.md

@@ -44,6 +44,11 @@ To build for web deployment:
 
 To build the desktop application:
 
+0. You must web build first:
+   ```bash
+   npm run build
+   ```
+
 1. Run the Electron build:
    ```bash
    npm run build:electron
@@ -53,7 +58,7 @@ To build the desktop application:
 
 3. To run the desktop app:
    ```bash
-   electron dist-electron
+   npx electron dist-electron
    ```
 
 ## Mobile Builds (Capacitor)

scripts/build-electron.js

@@ -18,12 +18,26 @@ async function main() {
     const indexPath = path.join(wwwDir, 'index.html');
     let indexContent = await fs.readFile(indexPath, 'utf8');
 
-    // Fix paths in index.html
+    // More comprehensive path fixing
     indexContent = indexContent
+      // Fix absolute paths to be relative
       .replace(/src="\//g, 'src="\./')
       .replace(/href="\//g, 'href="\./')
-      .replace(/src="\.\.\/assets\//g, 'src="./www/assets/')
-      .replace(/href="\.\.\/assets\//g, 'href="./www/assets/');
+      // Fix modulepreload paths
+      .replace(/<link [^>]*rel="modulepreload"[^>]*href="\/assets\//g, '<link rel="modulepreload" as="script" crossorigin="" href="./assets/')
+      .replace(/<link [^>]*rel="modulepreload"[^>]*href="\.\/assets\//g, '<link rel="modulepreload" as="script" crossorigin="" href="./assets/')
+      // Fix stylesheet paths
+      .replace(/<link [^>]*rel="stylesheet"[^>]*href="\/assets\//g, '<link rel="stylesheet" crossorigin="" href="./assets/')
+      .replace(/<link [^>]*rel="stylesheet"[^>]*href="\.\/assets\//g, '<link rel="stylesheet" crossorigin="" href="./assets/')
+      // Fix script paths
+      .replace(/src="\/assets\//g, 'src="./assets/')
+      .replace(/src="\.\/assets\//g, 'src="./assets/')
+      // Fix any remaining asset paths
+      .replace(/(['"]\/?)(assets\/)/g, '"./assets/');
+
+    // Debug output
+    console.log('After path fixing, checking for remaining /assets/ paths:', indexContent.includes('/assets/'));
+    console.log('Sample of fixed content:', indexContent.slice(0, 500));
 
     await fs.writeFile(indexPath, indexContent);
     

src/electron/main.js

@@ -24,6 +24,46 @@ function createWindow() {
     },
   });
 
+  // Always open DevTools for now
+  mainWindow.webContents.openDevTools();
+
+  // Intercept requests to fix asset paths
+  mainWindow.webContents.session.webRequest.onBeforeRequest(
+    {
+      urls: [
+        "file://*/*/assets/*",
+        "file://*/assets/*",
+        "file:///assets/*", // Catch absolute paths
+        "<all_urls>", // Catch all URLs as a fallback
+      ],
+    },
+    (details, callback) => {
+      let url = details.url;
+      console.log("Intercepting asset request:", url);
+
+      // Handle paths that don't start with file://
+      if (!url.startsWith("file://") && url.includes("/assets/")) {
+        url = `file://${path.join(__dirname, "www", url)}`;
+      }
+
+      // Handle absolute paths starting with /assets/
+      if (url.includes("/assets/") && !url.includes("/www/assets/")) {
+        const baseDir = url.includes("dist-electron")
+          ? url.substring(
+              0,
+              url.indexOf("/dist-electron") + "/dist-electron".length,
+            )
+          : `file://${__dirname}`;
+        const assetPath = url.split("/assets/")[1];
+        const newUrl = `${baseDir}/www/assets/${assetPath}`;
+        console.log("Redirecting to:", newUrl);
+        callback({ redirectURL: newUrl });
+        return;
+      }
+
+      callback({}); // No redirect for other URLs
+    },
+  );
   // Debug info
   console.log("Debug Info:");
   console.log("Running in dev mode:", isDev);
@@ -34,6 +74,7 @@ function createWindow() {
   console.log("process.cwd():", process.cwd());
 
   const indexPath = path.join(__dirname, "www", "index.html");
+  console.log("Loading index from:", indexPath);
   console.log("www path:", path.join(__dirname, "www"));
   console.log("www assets path:", path.join(__dirname, "www", "assets"));