WebStorm Live Edit and File Watchers: keeping a small app available while migrating front-end and server code

Answer to the core questions

• Can a File Watcher reliably chain a front‑end rebuild and a rolling server reload? Yes. Using Vite’s --watch mode together with a process manager that restarts the Node process only after the bundle is fully written gives a deterministic sequence. A typical watcher script looks like:

  #!/usr/bin/env bash
  # Start Vite in watch mode
  npm run build:watch && 
  # Restart the server once the bundle is ready
  nodemon --watch dist/server.js --exec node dist/server.js
  

  Vite writes its output to a temporary file and renames it atomically, so the server never reads a half‑written file.
• Is there a supported way to scope Live Edit so state‑ful pages are excluded? No. JetBrains’ Live Edit applies to any open browser tab that matches the file type. There is no route‑level filtering. The only workaround is to manually disable Live Edit for the tabs that should stay stable, or run the server in a separate process that the IDE cannot connect to.
• Does the dev server need to stay in WebStorm’s terminal for Live Edit to keep working? Yes. Live Edit establishes a WebSocket connection to the dev server when you launch it from the IDE’s built‑in terminal. If the server is moved to another terminal or restarted outside the IDE, the Live Edit connection is lost and the browser will not receive patch updates.

Confirmed facts and practical steps

1. Configure Vite for watch mode. Add a script to package.json:

   "scripts": {
     "build:watch": "vite build --watch"
   }
   

   Running npm run build:watch writes the bundle to dist/ atomically.
2. Set up a File Watcher. In WebStorm go to Settings | Tools | File Watchers and create a new watcher:
   • File type: JavaScript or All.
   • Scope: project files.
   • Program: bash (or sh on Windows via Git Bash).
   • Arguments: -c "npm run build:watch && nodemon --watch dist/server.js --exec node dist/server.js"
   • Working directory: project root.
   This script starts Vite in watch mode and, once the first bundle is emitted, launches nodemon to restart the Node server.
3. Keep the dev server in WebStorm’s terminal. Open the built‑in terminal, run the wrapper script, and leave it running. Live Edit will stay connected as long as the process is alive.
4. Disable Live Edit for stateful pages. If a page uses WebSockets or holds in‑memory state, open it in a separate browser window or manually toggle Settings | Build, Execution, Deployment | Debugger | Live Edit to disable the feature for that tab.
5. Optional: use a more robust process manager. If nodemon’s brief restart gap is unacceptable, replace it with pm2 or forever configured to keep the old process alive until the new one signals readiness.

Things to verify in your environment

• Open a page that opens a WebSocket. After editing a front‑end file, confirm the connection stays alive and the page updates via Live Edit.
• Check the WebStorm event log for Live Edit connected after each server restart.
• Ensure the watcher’s file pattern matches only the files you want to rebuild; otherwise you’ll get unnecessary restarts.

Missing diagnostic detail

What process manager are you currently using for the Node server (e.g., nodemon, pm2, or a custom script)? Knowing that will help fine‑tune the restart strategy for zero downtime.