WIP: Electron asset path and renderer build fixes

- Configure Vite renderer build for relative asset paths and explicit asset directory
- Remove baseURLForDataURL (caused Electron crash)
- Add debug logging for asset/network requests
- App now loads and assets are found, but some stylesheets may still be missing

Next: investigate CSS chunking/code splitting for Electron reliability.

.gitignore

@@ -54,5 +54,5 @@ build_logs/
 # PWA icon files generated by capacitor-assets
 icons
 
-
+*.log
 android/app/src/main/res/

src/electron/main.ts

@@ -19,7 +19,7 @@ const logger = {
 // Check if running in dev mode
 const isDev = process.argv.includes("--inspect");
 
-function createWindow(): void {
+async function createWindow(): Promise<void> {
   // Add before createWindow function
   const preloadPath = app.isPackaged
     ? path.join(app.getAppPath(), "dist-electron", "preload.js")
@@ -62,40 +62,36 @@ function createWindow(): void {
   // Always open DevTools for now
   mainWindow.webContents.openDevTools();
 
-  // Intercept requests to fix asset paths
+  // Intercept requests to robustly fix asset paths for Electron
   mainWindow.webContents.session.webRequest.onBeforeRequest(
-    {
+    { urls: ["*://*/*"] },
-      urls: [
-        "file://*/*/assets/*",
-        "file://*/assets/*",
-        "file:///assets/*", // Catch absolute paths
-        "<all_urls>", // Catch all URLs as a fallback
-      ],
-    },
     (details, callback) => {
-      let url = details.url;
+      const url = details.url;
+      logger.log('[main.ts] Intercepted request:', url);
       
-      // Handle paths that don't start with file://
+      // Match both file:///assets/... and /assets/...
-      if (!url.startsWith("file://") && url.includes("/assets/")) {
+      const assetMatch = url.match(/(?:file:\/\/\/|file:\/\/|https?:\/\/[^\/]+)?\/assets\/(.+)/);
-        url = `file://${path.join(__dirname, "www", url)}`;
+      if (assetMatch) {
+        const assetRelPath = assetMatch[1];
+        const assetAbsPath = path.join(app.getAppPath(), "dist-electron", "www", "assets", assetRelPath);
+        logger.log('[main.ts] Asset request detected:', {
+          originalUrl: url,
+          assetRelPath,
+          assetAbsPath,
+          exists: fs.existsSync(assetAbsPath)
+        });
+        
+        if (fs.existsSync(assetAbsPath)) {
+          const newUrl = `file://${assetAbsPath}`;
+          logger.log('[main.ts] Redirecting to:', newUrl);
+          callback({ redirectURL: newUrl });
+          return;
+        } else {
+          logger.error('[main.ts] Asset file not found:', assetAbsPath);
+        }
       }
-
+      callback({});
-      // 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}`;
-        callback({ redirectURL: newUrl });
-        return;
-      }
-
-      callback({}); // No redirect for other URLs
-    },
   );
 
   if (isDev) {
@@ -157,20 +153,21 @@ function createWindow(): void {
     },
   );
 
-  // Load the index.html
+  // Load the index.html with the correct base URL for assets
-  mainWindow
+  const baseURL = `file://${path.dirname(indexPath)}/`;
-    .loadFile(indexPath)
+  logger.log('[main.ts] Loading with base URL:', baseURL);
-    .then(() => {
+  
-      logger.log("Successfully loaded index.html");
+  try {
-      if (isDev) {
+    await mainWindow.loadURL(`file://${indexPath}`);
-        mainWindow.webContents.openDevTools();
+    logger.log("Successfully loaded index.html");
-        logger.log("DevTools opened - running in dev mode");
+    if (isDev) {
-      }
+      mainWindow.webContents.openDevTools();
-    })
+      logger.log("DevTools opened - running in dev mode");
-    .catch((err) => {
+    }
-      logger.error("Failed to load index.html:", err);
+  } catch (err) {
-      logger.error("Attempted path:", indexPath);
+    logger.error("Failed to load index.html:", err);
-    });
+    logger.error("Attempted path:", indexPath);
+  }
 
   // Listen for console messages from the renderer
   mainWindow.webContents.on("console-message", (_event, _level, message) => {

temp.har

@@ -0,0 +1,11 @@
+{
+  "log": {
+    "version": "1.2",
+    "creator": {
+      "name": "WebInspector",
+      "version": "537.36"
+    },
+    "pages": [],
+    "entries": []
+  }
+}

vite.config.electron.renderer.mts

@@ -4,6 +4,7 @@ import path from 'path';
 
 export default defineConfig({
   plugins: [vue()],
+  base: './',
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'src'),
@@ -12,10 +13,13 @@ export default defineConfig({
   build: {
     outDir: 'dist-electron/www',
     emptyOutDir: false,
+    assetsDir: 'assets',
     rollupOptions: {
       input: path.resolve(__dirname, 'src/main.electron.ts'),
       output: {
-        entryFileNames: 'main.electron.js'
+        entryFileNames: 'main.electron.js',
+        assetFileNames: 'assets/[name]-[hash][extname]',
+        chunkFileNames: 'assets/[name]-[hash].js'
       }
     },
     commonjsOptions: {