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.

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

• For a full list of encoding values supported by Node (also used in the Content-Type HTTP Header), check out Node’s Buffer documentation.
• Using a root 404.html file (a popular convention supported by Netlify, GitHub Pages, Vercel, and others) supported! We use the content from a 404.html in your output folder when serving the error page for missing content.

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:

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).

Other pages in Watch and Serve:

• Eleventy Dev Server
• Browsersync
• Vite