Watch files and directories with Eleventy Dev Server

[patrulea]

Browsersync allows you to watch for custom files and directories with the files options key. I used it to reload on stylesheet changes (files: ["_site/assets/**/*.css"]).

Is there or will there be a similar feature for Eleventy Dev Server?

[jeromecoupe]

There is a feature doing exactly that : the --input flag. Unfortunately, it does not work very well (for me) right now. Would be grateful if you could report back how it works for you / with your project.

[patrulea]

Would that require to run npx @11ty/eleventy-dev-server --input=_site as a separate process in parallel?

[zachleat]

https://www.11ty.dev/docs/watch-serve/#add-your-own-watch-targets is the feature you want.

Note the change in 2.0.0-canary.19 that allows you to addWatchTarget on ignored files: #893

[zachleat]

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and we will reopen the issue. Thanks!

[patrulea]

Note the change in 2.0.0-canary.19 that allows you to addWatchTarget on ignored files.

Sounds great!

I currently compile SASS independently through a parallel lightningcss process. And I’m watching the source SASS directory with addWatchTarget. Though, when I save changes to my stylesheets, the Eleventy Web Server both triggers a site build and refreshes the browser.

I just need the browser to be refreshed, not to trigger a site build.

What would be the ideal setup to accomplish this?

[zachleat]

I wouldn’t use addWatchTarget for this, I’d go for addPassthroughCopy which does what you’re talking about: https://www.11ty.dev/docs/copy/#passthrough-during-serve

Though this is the first time I’d noticed an overlap between those two features—interesting thought!

[patrulea]

In that case, I’d have to:

1. compile SASS into CSS within the source folder and then addPassthroughCopy it to /_site
2. .gitignore the compiled CSS files
3. addWatchTarget the compiled (but ignored) CSS for changes

I think there’s something I’m not quite getting.

---

PS. this is the repo I’m working on: https://github.com/patrulea/erick-david/tree/2023

[zachleat]

Ah, I see what you mean @patrulea! I’m working on trying to sneak 11ty/eleventy-dev-server#19 into the 2.0 release, which I think solves that issue! Subscribe over there!

[patrulea]

It ended up working flawlessly on the stable release. Thank you!