Skip to navigation Skip to main content
11ty Logo Sustainability Fundraising
Eleventy
Eleventy Documentation
Stable
2.0.1
Canary
3.0.0-alpha.13
Toggle Menu
Eleventy 1.93s
Gatsby 29.05s

Watch and Serve Configuration

Contents

Add Your Own Watch Targets Jump to heading

The addWatchTarget config method allows you to manually add a file or directory for Eleventy to watch. When the file or the files in this directory change Eleventy will trigger a build. This is useful if Eleventy is not directly aware of any external file dependencies.

Filename .eleventy.js
module.exports = function (eleventyConfig) {
eleventyConfig.addWatchTarget("./src/scss/");
};

Advanced usage note: This works with chokidar under the hood and chokidar uses picomatch for globbing:

Ignore Watching Files Jump to heading

.gitignore Jump to heading

Eleventy will ignore changes to files or folders listed in your .gitignore file by default, unless setUseGitIgnore is turned off.

Configuration API Added in v2.0.0 Jump to heading

Previously, the configuration API ignores for template processing were also used as ignores for watching (e.g. eleventyConfig.ignores.add("README.md")).

New in v2.0.0, watch target ignores now have their own dedicated API:

module.exports = function (eleventyConfig) {
// Do not rebuild when README.md changes (You can use a glob here too)
eleventyConfig.watchIgnores.add("README.md");

// Or delete entries too
eleventyConfig.watchIgnores.delete("README.md");
};

The watchIgnores Set starts with a default **/node_modules/** entry.

Watch JavaScript Dependencies Jump to heading

When in --watch mode, Eleventy will spider the dependencies of your JavaScript Templates (.11ty.js), JavaScript Data Files (.11tydata.js or _data/**/*.js), or Configuration File (usually .eleventy.js) to watch those files too. Files in node_modules directories are ignored. This feature is enabled by default.

Filename .eleventy.js
module.exports = function (eleventyConfig) {
// Enabled by default
eleventyConfig.setWatchJavaScriptDependencies(false);
};

Add delay before re-running Jump to heading

A hardcoded amount of time Eleventy will wait before triggering a new build when files have changes during --watch or --serve modes. You probably won’t need this, but is useful in some edge cases with other task runners (Gulp, Grunt, etc).

module.exports = function (eleventyConfig) {
// default is 0
eleventyConfig.setWatchThrottleWaitTime(100); // in milliseconds
};

Advanced chokidar Configuration Jump to heading

Advanced chokidar options can be defined using the setChokidarConfig configuration API method:

Filename .eleventy.js
module.exports = function(eleventyConfig) {
eleventyConfig.setChokidarConfig({
usePolling: true,
interval: 500,
});
}
WARNING:
If you’re using Windows Subsystem for Linux (WSL) and your project exists outside of your home directory (~), you will likely want to use the usePolling feature to ensure watching works correctly. This is a chokidar limitation.

Eleventy Dev Server Added in v2.0.0 Jump to heading

Browsersync Jump to heading


Other pages in Configuration: