Stand with Ukraine 🇺🇦
Eleventy
The possum is Eleventy’s mascot

Eleventy Documentation

Menu

Watch and Serve Configuration Jump to heading

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 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/");
};

Eleventy will not add a watch for files or folders that are in .gitignore, unless setUseGitIgnore is turned off. See the chapter on ignore files.

Add delay before re-running New in v0.11.0 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
};

Eleventy Dev Server Coming soon in v2.0.0 Jump to heading

Eleventy 2.0 bundles a brand new default development server. You can configure this with the new setServerOptions Configuration API method.

Filename .eleventy.js
module.exports = function(eleventyConfig) {
  eleventyConfig.setServerOptions({
    // Default values are shown:

    // Opt-out of the live reload snippet
    enabled: true,

    // Opt-out of DOM diffing updates and use page reloads
    domdiff: true,

    // The starting port number to attempt to use
    port: 8080,

    // number of times to increment the port if in use
    portReassignmentRetryCount: 10,

    // Show local network IP addresses for device testing
    showAllHosts: false,

    // Use a local key/certificate to opt-in to local HTTP/2 with https
    https: {
      // key: "./localhost.key",
      // cert: "./localhost.cert",
    },

    // Change the name of the special folder name used for injected scripts
    folder: ".11ty",

    // Show the server version number on the command line
    showVersion: false,

    // Change the default file encoding for reading/serving files
    encoding: "utf-8",
  });
};
Want to know if your Canary version includes one of these properties?
Try out the devcert-cli package to generate a localhost key and certificate for https and HTTP/2.

Swap back to Browsersync Coming soon in v2.0.0 Jump to heading

You can swap back to Eleventy Dev Server using the setServerOptions configuration API and the @11ty/eleventy-server-browsersync package.

First, install it:

npm install @11ty/eleventy-server-browsersync

Then, enable it in your configuration file:

Filename .eleventy.js
module.exports = function(eleventyConfig) {
  eleventyConfig.setServerOptions({
    module: "@11ty/eleventy-server-browsersync",

    // Default Browsersync options shown:
    port: 8080,
    open: false,
    notify: false,
    ui: false,
    ghostMode: false,

    // Opt-out of the Browsersync snippet
    // snippet: false,
  })
};

View the full list of Browsersync options.

setBrowserSyncConfig Jump to heading

eleventyConfig.setBrowserSyncConfig was the previous Configuration API method used in versions of Eleventy prior to v2. It was changed to be a no-op in Eleventy v2 (it has no functional purpose).

Browsersync Jump to heading

This section of documentation only applies to Eleventy 1.x and 0.x and will be removed when Eleventy 2.0 is stable. If you want to use Browsersync with Eleventy 2.0, learn how to swap back to Browsersync.

Override Browsersync Server Options Jump to heading

Useful if you want to change or override the default Browsersync configuration. Find the Eleventy defaults in EleventyServe.js. Take special note that Eleventy does not use Browsersync’s watch options and trigger reloads manually after our own internal watch methods are complete. See full options list on the Browsersync documentation.

Filename .eleventy.js
module.exports = function(eleventyConfig) {
  eleventyConfig.setBrowserSyncConfig({
    notify: true
  });
};

Opt-out of the BrowserSync JavaScript snippet New in v1.0.0 Jump to heading

New in browser-sync@2.27.1 New in v1.0.0. Opt-out of the JavaScript snippet normally injected by BrowserSync. This disables BrowserSync live-reloading.

module.exports = function(eleventyConfig) {
  eleventyConfig.setBrowserSyncConfig({
    snippet: false,
  });
};

Other pages in Configuration: