From ea1b10fea684a34fee96822219f981b7ded8ec1a Mon Sep 17 00:00:00 2001
From: Kacper <kacperlachowiczwp.pl@wp.pl>
Date: Wed, 17 Dec 2025 21:41:08 +0100
Subject: [PATCH] fix: skip electron plugin in CI to prevent X11 display error
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The vite-plugin-electron was trying to spawn Electron during the Vite
dev server startup, which fails in CI because there's no X11 display.

- Use Vite's function config to check command type (serve vs build)
- Only skip electron plugin during dev server (command=serve) in CI
- Always include electron plugin during build for dist-electron/main.js
- Add VITE_SKIP_ELECTRON env var support for explicit control
- Update playwright.config.ts to pass VITE_SKIP_ELECTRON in CI

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/ui/playwright.config.ts |   2 +
 apps/ui/vite.config.mts      | 101 ++++++++++++++++++++---------------
 2 files changed, 59 insertions(+), 44 deletions(-)

diff --git a/apps/ui/playwright.config.ts b/apps/ui/playwright.config.ts
index 9ffead44..7cd79e71 100644
--- a/apps/ui/playwright.config.ts
+++ b/apps/ui/playwright.config.ts
@@ -52,6 +52,8 @@ export default defineConfig({
             env: {
               ...process.env,
               VITE_SKIP_SETUP: "true",
+              // Skip electron plugin in CI - no display available for Electron
+              VITE_SKIP_ELECTRON: process.env.CI === "true" ? "true" : undefined,
             },
           },
         ],
diff --git a/apps/ui/vite.config.mts b/apps/ui/vite.config.mts
index 3431415b..ed08342f 100644
--- a/apps/ui/vite.config.mts
+++ b/apps/ui/vite.config.mts
@@ -8,50 +8,63 @@ import { fileURLToPath } from "url";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-export default defineConfig({
-  plugins: [
-    electron({
-      main: {
-        entry: "src/main.ts",
-        vite: {
-          build: {
-            outDir: "dist-electron",
-            rollupOptions: {
-              external: ["electron"],
-            },
-          },
-        },
+export default defineConfig(({ command }) => {
+  // Only skip electron plugin during dev server in CI (no display available for Electron)
+  // Always include it during build - we need dist-electron/main.js for electron-builder
+  const skipElectron =
+    command === "serve" &&
+    (process.env.CI === "true" || process.env.VITE_SKIP_ELECTRON === "true");
+
+  return {
+    plugins: [
+      // Only include electron plugin when not in CI/headless dev mode
+      ...(skipElectron
+        ? []
+        : [
+            electron({
+              main: {
+                entry: "src/main.ts",
+                vite: {
+                  build: {
+                    outDir: "dist-electron",
+                    rollupOptions: {
+                      external: ["electron"],
+                    },
+                  },
+                },
+              },
+              preload: {
+                input: "src/preload.ts",
+                vite: {
+                  build: {
+                    outDir: "dist-electron",
+                    rollupOptions: {
+                      external: ["electron"],
+                    },
+                  },
+                },
+              },
+            }),
+          ]),
+      TanStackRouterVite({
+        target: "react",
+        autoCodeSplitting: true,
+        routesDirectory: "./src/routes",
+        generatedRouteTree: "./src/routeTree.gen.ts",
+      }),
+      tailwindcss(),
+      react(),
+    ],
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "./src"),
       },
-      preload: {
-        input: "src/preload.ts",
-        vite: {
-          build: {
-            outDir: "dist-electron",
-            rollupOptions: {
-              external: ["electron"],
-            },
-          },
-        },
-      },
-    }),
-    TanStackRouterVite({
-      target: "react",
-      autoCodeSplitting: true,
-      routesDirectory: "./src/routes",
-      generatedRouteTree: "./src/routeTree.gen.ts",
-    }),
-    tailwindcss(),
-    react(),
-  ],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
     },
-  },
-  server: {
-    port: 5173,
-  },
-  build: {
-    outDir: "dist",
-  },
+    server: {
+      port: 5173,
+    },
+    build: {
+      outDir: "dist",
+    },
+  };
 });