Fix dev server does not restart on save (#544)

* Partially revert a179d5c: vite 6 breaks watch mode

Also unlocks vitest from 2.1.6 - no requirement to be pinned to that version.

Partially reverts: a179d5c

* Replace launchdev script with vite plugin

Similar to previous impl., but uses watch mode detection instead of script.

* Convert launchdev.js script to playwright loader

* Rename for clarity: vite.config.ts

* Remove redundant code

* Remove debug code

infrastructure/viteElectronAppPlugin.ts

@@ -0,0 +1,35 @@
+import type { PluginOption } from 'vite';
+import { spawn, type ChildProcess } from 'node:child_process';
+import electronPath from 'electron';
+
+/**
+ * Loads the electron app whenever vite is loaded in watch mode.
+ * Reloads the app after the bundle has been written and closed.
+ *
+ * Only operates in watch mode.
+ */
+export function viteElectronAppPlugin(): PluginOption {
+  const startApp = () => {
+    electronApp = spawn(String(electronPath), ['--inspect=9223', '.'], { stdio: 'inherit' });
+    electronApp.addListener('exit', () => process.exit());
+  };
+
+  let electronApp: ChildProcess | null = null;
+
+  return {
+    name: 'Load Electron app in watch mode',
+    apply: 'build',
+    buildStart() {
+      // Only operate in watch mode.
+      if (this.meta.watchMode !== true || !electronApp) return;
+
+      electronApp.removeAllListeners();
+      electronApp.kill('SIGINT');
+      electronApp = null;
+    },
+    closeBundle() {
+      // Only operate in watch mode.
+      if (this.meta.watchMode === true) startApp();
+    },
+  };
+}

package.json

@@ -41,14 +41,14 @@
     "publish:staging": "yarn run vite:compile && todesktop build --config=./todesktop.staging.json --async",
     "reset-install": "node scripts/resetInstall.js",
     "sign": "node debug/sign.js",
-    "start": "node ./scripts/launchdev.js",
+    "start": "vite build --watch",
     "test:e2e": "npx playwright test",
     "test:unit": "vitest run",
     "test:update-snapshots": "npx playwright test --update-snapshots",
     "todesktop:afterPack": "./scripts/todesktop/afterPack.cjs",
     "todesktop:beforeInstall": "./scripts/todesktop/beforeInstall.cjs",
     "typescript": "tsc -p tsconfig.build.json",
-    "vite:compile": "yarn run typescript && vite build --config vite.main.config.ts && vite build --config vite.preload.config.ts",
+    "vite:compile": "yarn run typescript && vite build && vite build --config vite.preload.config.ts",
     "vite:types": "yarn run typescript && vite build --config vite.types.config.ts && node scripts/prepareTypes.js",
     "release:types": "node scripts/releaseTypes.js",
     "update:frontend": "node scripts/updateFrontend.js"
@@ -84,9 +84,9 @@
     "ts-node": "^10.0.0",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.18.1",
-    "vite": "^6.0.3",
+    "vite": "^5.4.11",
     "vite-plugin-dts": "^4.3.0",
-    "vitest": "2.1.6"
+    "vitest": "^2.1.8"
   },
   "keywords": [],
   "author": {

playwright.setup.ts

@@ -4,7 +4,7 @@ async function globalSetup() {
   console.log('Playwright globalSetup called');
 
   return new Promise<void>((resolve, reject) => {
-    const electron = spawn('node', ['./scripts/launchdev.js']);
+    const electron = spawn('node', ['./scripts/launchCI.js']);
 
     electron.on('close', () => {
       reject(new Error('process failed to start'));

scripts/launchCI.js

@@ -0,0 +1,45 @@
+import { build } from 'vite';
+import electronPath from 'electron';
+import { spawn } from 'node:child_process';
+
+// Starts the app using the vite dev server, for use in playwright e2e testing.
+// Needs to be replaced with something more permanent at some point.
+
+/** @type {'production' | 'development'} */
+const mode = (process.env.MODE = process.env.MODE || 'development');
+
+/** @type {import('vite').LogLevel} */
+const logLevel = 'warn';
+
+/** @returns {import('vite').PluginOption} */
+function runAppAfterBuild() {
+  return {
+    name: 'reload-app-on-main-package-change-a',
+    writeBundle() {
+      // CI-specific Electron launch args
+      const args = ['--remote-debugging-port=9000', '--remote-allow-origins=http://127.0.0.1:9000', '.'];
+
+      /** Spawn new electron process */
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
+      const electronApp = spawn(String(electronPath), args, { stdio: 'inherit' });
+
+      /** Stops the watch script when the application has been quit */
+      electronApp.addListener('exit', () => process.exit());
+    },
+  };
+}
+
+/**
+ * Setup watcher for `main` package
+ * On file changed it totally re-launch electron app.
+ */
+function setupMainPackageWatcher() {
+  return build({
+    mode,
+    logLevel,
+    configFile: 'vite.config.ts',
+    plugins: [runAppAfterBuild()],
+  });
+}
+
+await setupMainPackageWatcher();

tsconfig.json

@@ -21,5 +21,12 @@
   },
   "exclude": [".history", ".vite", "assets", "dist", "node_modules", "out"],
   // Include JS files so they are covered by projectService (ESLint)
-  "include": ["src/**/*", "*.ts", "*.js", "scripts/**/*", "tests/**/*"]
+  "include": [
+    "src/**/*",
+    "*.ts",
+    "*.js",
+    "infrastructure/**/*",
+    "scripts/**/*",
+    "tests/**/*"
+  ]
 }

vite.base.config.ts

@@ -1,5 +1,5 @@
 import { builtinModules } from 'node:module';
-import type { ConfigEnv, Plugin, UserConfig } from 'vite';
+import type { ConfigEnv, UserConfig } from 'vite';
 import pkg from './package.json';
 
 export const builtins = ['electron', ...builtinModules.flatMap((m) => [m, `node:${m}`])];
@@ -29,18 +29,3 @@ export function getBuildConfig(env: ConfigEnv): UserConfig {
     },
   };
 }
-
-export function pluginHotRestart(command: 'reload' | 'restart'): Plugin {
-  return {
-    name: '@electron-forge/plugin-vite:hot-restart',
-    closeBundle() {
-      if (command === 'reload') {
-        // TODO: Send message to external renderer dev server for reload.
-      } else {
-        // Main process hot restart.
-        // https://github.com/electron/forge/blob/v7.2.0/packages/api/core/src/api/start.ts#L216-L223
-        process.stdin.emit('data', 'rs');
-      }
-    },
-  };
-}

vite.main.config.ts → vite.config.ts

@@ -1,7 +1,8 @@
 /// <reference types="vitest/config" />
-import type { UserConfig } from 'vite';
+import { UserConfig } from 'vite';
 import { defineConfig, mergeConfig } from 'vite';
-import { getBuildConfig, external, pluginHotRestart } from './vite.base.config';
+import { getBuildConfig, external } from './vite.base.config';
+import { viteElectronAppPlugin } from './infrastructure/viteElectronAppPlugin';
 import { sentryVitePlugin } from '@sentry/vite-plugin';
 import { version } from './package.json';
 
@@ -21,8 +22,14 @@ export default defineConfig((env) => {
       sourcemap: true,
       minify: false,
     },
+    server: {
+      watch: {
+        ignored: ['**/assets/ComfyUI/**', 'venv/**'],
+      },
+    },
     plugins: [
-      pluginHotRestart('restart'),
+      // Custom hot reload solution for vite 6
+      viteElectronAppPlugin(),
       process.env.NODE_ENV === 'production'
         ? sentryVitePlugin({
             org: 'comfy-org',

vitest.workspace.ts

@@ -2,7 +2,7 @@ import { defineWorkspace } from 'vitest/config';
 
 export default defineWorkspace([
   {
-    extends: './vite.main.config.ts',
+    extends: './vite.config.ts',
   },
   {
     extends: './vite.preload.config.ts',