We The Protesters
Eleventy
The possum is Eleventy’s mascot
Eleventy Documentation
Menu
Eleventy 5.81s
Nuxt 14.77s

Eleventy Dev Server Added in v2.0.0

Contents

The Eleventy 2.0 release bundles a new development server. Check out the 11ty/eleventy-dev-server repository on GitHub.

At time of release, this new server helps Eleventy by:

Read more on the Eleventy Dev Server 1.0 release notes.

Options Jump to heading

You can configure the server with the new setServerOptions Configuration API method.

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

// Whether the live reload snippet is used
liveReload: true,

// Whether DOM diffing updates are applied where possible instead of page reloads
domDiff: true,

// The starting port number
// Will increment up to (configurable) 10 times if a port is already in use.
port: 8080,

// Additional files to watch that will trigger server updates
// Accepts an Array of file paths or globs (passed to `chokidar.watch`).
// Works great with a separate bundler writing files to your output folder.
// e.g. `watch: ["_site/**/*.css"]`
watch: [],

// 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 default file encoding for reading/serving files
encoding: "utf-8",
});
};
Expand to see the Full options list
Filename .eleventy.js
module.exports = function(eleventyConfig) {
eleventyConfig.setServerOptions({
// Show the server version number on the command line
showVersion: false,

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

// Number of times to increment a port is already in use
portReassignmentRetryCount: 10,

// Alias for backwards compatibility, renamed to `injectedScriptsFolder` in Dev Server 1.0+
folder: ".11ty",

// Alias for backwards compatibility, renamed to `liveReload` in Dev Server 1.0+
enabled: true,

// Alias for backwards compatibility, renamed to `domDiff` in Dev Server 1.0+
domdiff: true,
});
};
INFO:
Try out the devcert-cli package to generate a localhost key and certificate for https and HTTP/2.

Swap back to Browsersync Added 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).


Other pages in Watch and Serve: