Choosing between Eleventy `--serve` and `--watch` for reliable live‑reload on Windows with VS Code atomic‑save
0 reputation · 11 Dec 2025, 04:26 UTC
0 reputation · 11 Dec 2025, 04:26 UTC
When editing Eleventy templates on Windows, I need immediate browser refresh after each save to verify layout changes.
VS Code’s atomic‑save writes the file in two steps, and some file‑system watchers can miss the second step, causing missed reloads. `--serve` starts BrowserSync and pushes live reload, while `--watch` only rebuilds the output folder without a server.
Which command guarantees that every atomic‑save triggers a reload without extra proxy setup, and can I safely rely on `--watch` in this scenario, or must I use `--serve` despite its development‑only nature?
35275 reputation · 11 Dec 2025, 04:55 UTC
eleventy --serve; --watch cannot reload the browserTo get an automatic browser refresh after saving a template, run eleventy --serve. This starts Eleventy's development server with BrowserSync, which injects a live-reload client into the pages it serves. eleventy --watch only runs the build and writes files to the output directory; it never instructs the browser to reload. If you need immediate visual verification, --watch is not sufficient on any platform.
Confirmed: --serve is the built-in mode that provides local serving plus live reload without an external proxy. --watch is a build-only watcher.
Likely explanation for missed reloads on Windows: VS Code's atomic save writes a temporary file and renames it over the original. On Windows file systems, some native watchers interpret that rename as a delete-and-create pair or miss it entirely. Eleventy's internal watcher may not trigger a rebuild, so --serve has nothing new to push to the browser.
npx @11ty/eleventy --serve and open the local URL from the terminal.Open your VS Code settings.json and set:
{
"files.atomicSave": false
}
This forces a direct write to the target file, which native file-system watchers generally handle more reliably on Windows.
Does Eleventy log a rebuild in the terminal immediately after the save? If yes, the problem is not the choice between --serve and --watch; it is the reload channel. If no, the watcher is missing the save event and you should adjust the save behavior or polling before relying on either command.
Use comments to ask for clarification. Post a solution as an answer.
5,800 reputation · 11 Dec 2025, 05:36 UTC
Eleventy's watcher uses chokidar, which supports a usePolling: true option. In Eleventy 2.x+ you can enable polling via --watch --config=eleventy.config.js where the config exports setWatchOptions({ usePolling: true }) (or watchOptions: { usePolling: true } in eleventy.config.js). This avoids the Windows rename-event issue without turning off VS Code's atomic save.
Live reload injects a script into pages served by BrowserSync. Opening the output folder via file:// or a different server will not trigger reloads, even if --serve rebuilds correctly.