WIP (fix): improve electron build configuration and service worker handling

- Properly disable service workers in electron builds
- Add CSP headers for electron security
- Fix path resolution in electron context
- Improve preload script error handling and IPC setup
- Update build scripts for better electron/capacitor compatibility
- Fix router path handling in electron context
- Remove electron-builder dependency
- Streamline build process and output structure

This change improves the stability and security of electron builds while
maintaining PWA functionality in web builds. Service workers are now
properly disabled in electron context, and path resolution issues are
fixed.

src/electron/main.js

@@ -2,99 +2,103 @@ const { app, BrowserWindow } = require("electron");
 const path = require("path");
 const fs = require("fs");
 
+// Check if running in dev mode
+const isDev = process.argv.includes('--inspect');
+
 function createWindow() {
+  // Add before createWindow function
+  const preloadPath = path.join(__dirname, 'preload.js');
+  console.log('Checking preload path:', preloadPath);
+  console.log('Preload exists:', fs.existsSync(preloadPath));
+
   // Create the browser window.
   const mainWindow = new BrowserWindow({
     width: 1200,
     height: 800,
     webPreferences: {
-      nodeIntegration: true,
-      contextIsolation: false,
+      nodeIntegration: false,
+      contextIsolation: true,
       webSecurity: true,
       allowRunningInsecureContent: false,
+      preload: path.join(__dirname, 'preload.js')
     },
   });
 
-  // Disable service worker in Electron
-  mainWindow.webContents.session.setPermissionRequestHandler(
-    (webContents, permission, callback) => {
-      if (permission === "serviceWorker") {
-        return callback(false);
-      }
-      callback(true);
-    },
-  );
-
-  // Get the correct app path for packaged and development environments
-  const appPath = app.isPackaged ? process.resourcesPath : app.getAppPath();
-
-  // Add debug logging for paths
+  // Debug info
   console.log("Debug Info:");
+  console.log("Running in dev mode:", isDev);
   console.log("App is packaged:", app.isPackaged);
   console.log("Process resource path:", process.resourcesPath);
-  console.log("App path:", appPath);
+  console.log("App path:", app.getAppPath());
   console.log("__dirname:", __dirname);
   console.log("process.cwd():", process.cwd());
-  console.log("www path:", path.join(process.resourcesPath, "www"));
-  console.log(
-    "www assets path:",
-    path.join(process.resourcesPath, "www", "assets"),
-  );
 
-  // Try both possible www locations
-  const possiblePaths = [
-    path.join(appPath, "www", "index.html"),
-    path.join(appPath, "..", "www", "index.html"),
-    path.join(process.resourcesPath, "www", "index.html"),
-  ];
+  const indexPath = path.join(__dirname, 'www', 'index.html');
+  console.log("www path:", path.join(__dirname, 'www'));
+  console.log("www assets path:", path.join(__dirname, 'www', 'assets'));
 
-  let indexPath;
-  for (const testPath of possiblePaths) {
-    console.log("Testing path:", testPath);
-    if (fs.existsSync(testPath)) {
-      indexPath = testPath;
-      console.log("Found valid path:", indexPath);
-      break;
-    }
+  if (!fs.existsSync(indexPath)) {
+    console.error(`Index file not found at: ${indexPath}`);
+    throw new Error('Index file not found');
   }
 
+  // Set CSP headers
+  mainWindow.webContents.session.webRequest.onHeadersReceived((details, callback) => {
+    callback({
+      responseHeaders: {
+        ...details.responseHeaders,
+        'Content-Security-Policy': [
+          "default-src 'self';" +
+          "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;" +
+          "font-src 'self' https://fonts.gstatic.com;" +
+          "script-src 'self' 'unsafe-eval' 'unsafe-inline';" +
+          "img-src 'self' data: https:;"
+        ]
+      }
+    });
+  });
+
   // Load the index.html
   mainWindow
     .loadFile(indexPath)
     .then(() => {
       console.log("Successfully loaded index.html");
-      // Always open DevTools in packaged app for debugging
-      mainWindow.webContents.openDevTools();
+      if (isDev) {
+        mainWindow.webContents.openDevTools();
+        console.log("DevTools opened - running in dev mode");
+      }
     })
     .catch((err) => {
       console.error("Failed to load index.html:", err);
       console.error("Attempted path:", indexPath);
     });
 
-  // Listen for page errors
-  mainWindow.webContents.on(
-    "did-fail-load",
-    (event, errorCode, errorDescription) => {
-      console.error("Page failed to load:", errorCode, errorDescription);
-    },
-  );
-
   // Listen for console messages from the renderer
   mainWindow.webContents.on("console-message", (_event, level, message) => {
     console.log("Renderer Console:", message);
   });
+
+  // Add right after creating the BrowserWindow
+  mainWindow.webContents.on('did-fail-load', (event, errorCode, errorDescription) => {
+    console.error('Page failed to load:', errorCode, errorDescription);
+  });
+
+  mainWindow.webContents.on('preload-error', (event, preloadPath, error) => {
+    console.error('Preload script error:', preloadPath, error);
+  });
+
+  mainWindow.webContents.on('console-message', (event, level, message, line, sourceId) => {
+    console.log('Renderer Console:', message);
+  });
+
+  // Enable remote debugging when in dev mode
+  if (isDev) {
+    mainWindow.webContents.openDevTools();
+  }
 }
 
 // Handle app ready
-app.whenReady().then(() => {
-  createWindow();
-
-  app.on("activate", () => {
-    if (BrowserWindow.getAllWindows().length === 0) {
-      createWindow();
-    }
-  });
-});
+app.whenReady().then(createWindow);
 
 // Handle all windows closed
 app.on("window-all-closed", () => {
@@ -103,6 +107,12 @@ app.on("window-all-closed", () => {
   }
 });
 
+app.on("activate", () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow();
+  }
+});
+
 // Handle any errors
 process.on("uncaughtException", (error) => {
   console.error("Uncaught Exception:", error);