Open Path When Starting 11ty Serve

Eleventy comes with a built-in serve mode, which makes development easier. The Browsersync standard can even be overridden since version 7, for example to open the localhost address at startup.

If you build your website with Eleventy, you also benefit from the built-in --serve function. A local Browsersync server is started and your website can be accessed directly in the browser under a localhost address. Eleventy also automatically triggers a build if, for example, a markdown file has changed.

Since version 7 Eleventy also supports overwriting the Default options of Browsersync. I want to open the localhost address directly in the browser when starting the serve environment. Since my website is also available in two languages and usually redirects the root directory directly, I also want to open the de directory directly.

A short addition in the .eleventy.js file is sufficient for this:

eleventyConfig.setBrowserSyncConfig({	
  open: "local",	
  startPath: "/en",	
});

With the other standard settings, the --serve command will not only start the web server, but also directly open the URL localhost:8081/en in the browser.

Browsersync also supports a number of other Options. This allows you to control, for example, the default browser to be used for opening.