From 1c998a777fde2dc0303895a4fc81ffe6996faa38 Mon Sep 17 00:00:00 2001 From: Matthew Raymer Date: Wed, 25 Jun 2025 09:26:55 +0000 Subject: [PATCH] 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 | 2 +- src/electron/main.ts | 89 +++++++++++++++---------------- temp.har | 11 ++++ vite.config.electron.renderer.mts | 6 ++- 4 files changed, 60 insertions(+), 48 deletions(-) create mode 100644 temp.har diff --git a/.gitignore b/.gitignore index b92c212a..dc0cfc76 100644 --- a/.gitignore +++ b/.gitignore @@ -54,5 +54,5 @@ build_logs/ # PWA icon files generated by capacitor-assets icons - +*.log android/app/src/main/res/ \ No newline at end of file diff --git a/src/electron/main.ts b/src/electron/main.ts index e73027fd..89e348f0 100644 --- a/src/electron/main.ts +++ b/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 { // 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: [ - "file://*/*/assets/*", - "file://*/assets/*", - "file:///assets/*", // Catch absolute paths - "", // Catch all URLs as a fallback - ], - }, + { urls: ["*://*/*"] }, (details, callback) => { - let url = details.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}`; - callback({ redirectURL: newUrl }); - return; + const url = details.url; + logger.log('[main.ts] Intercepted request:', url); + + // Match both file:///assets/... and /assets/... + const assetMatch = url.match(/(?:file:\/\/\/|file:\/\/|https?:\/\/[^\/]+)?\/assets\/(.+)/); + 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({}); // No redirect for other URLs - }, + callback({}); + } ); if (isDev) { @@ -157,20 +153,21 @@ function createWindow(): void { }, ); - // Load the index.html - mainWindow - .loadFile(indexPath) - .then(() => { - logger.log("Successfully loaded index.html"); - if (isDev) { - mainWindow.webContents.openDevTools(); - logger.log("DevTools opened - running in dev mode"); - } - }) - .catch((err) => { - logger.error("Failed to load index.html:", err); - logger.error("Attempted path:", indexPath); - }); + // Load the index.html with the correct base URL for assets + const baseURL = `file://${path.dirname(indexPath)}/`; + logger.log('[main.ts] Loading with base URL:', baseURL); + + try { + await mainWindow.loadURL(`file://${indexPath}`); + logger.log("Successfully loaded index.html"); + if (isDev) { + mainWindow.webContents.openDevTools(); + logger.log("DevTools opened - running in dev mode"); + } + } catch (err) { + 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) => { diff --git a/temp.har b/temp.har new file mode 100644 index 00000000..1e5a6824 --- /dev/null +++ b/temp.har @@ -0,0 +1,11 @@ +{ + "log": { + "version": "1.2", + "creator": { + "name": "WebInspector", + "version": "537.36" + }, + "pages": [], + "entries": [] + } +} \ No newline at end of file diff --git a/vite.config.electron.renderer.mts b/vite.config.electron.renderer.mts index d250a28c..dcdb489d 100644 --- a/vite.config.electron.renderer.mts +++ b/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: {