Fixing long start-up times of the Eleventy dev server

Recently, I've encountered a peculiar issue with Eleventy. The development server stopped working:

eleventy --serve

[11ty] Wrote 92 files in 0.48 seconds (5.2ms each, v1.0.2)
[11ty] Watching…

There were no errors. Everything seemed fine, except for the dev server not being available. I've checked my other Eleventy projects, and all of them shared the same behavior.

I've enabled the Eleventy debug log, but it didn't provide any further insights:

cross-env DEBUG=* eleventy --serve

I've decided to postpone further debugging, but I've accidentally left the Eleventy process running. At some point I've noticed the dev server was running again. Confused by this behavior, I've restarted the server. It turned out that the dev server was actually working, but it required several minutes to launch. What was going on? I couldn't research this issue, as I was sitting on a train with no internet connection. Wait, could this be the root cause? Indeed, later at home I no longer experienced the problem. After turning off my wi-fi I could again reproduce it.

I have found out that this is not an Eleventy issue. It's an issue with Browsersync, which Eleventy < 2.0 uses under the hood. Fortunately, there is a config option to fix the issue:

// .eleventy.js (< 2.0)
module.exports = function (eleventyConfig) {
  eleventyConfig.setBrowserSyncConfig({
    online: false
  });
};

This option will disable some network-related features, like exposing the server in the local network. While sometimes useful, I think it's better to use it as opt-in anyway.

Eleventy 2.0 comes with a custom development server, which probably doesn't have this issue. If you're using @11ty/eleventy-server-browsersync with Eleventy 2.0, use the new setServerOptions function instead:

// .eleventy.js (>= 2.0)
module.exports = function (eleventyConfig) {
  eleventyConfig.setServerOptions({
    module: "@11ty/eleventy-server-browsersync",
    online: false,
  });
};