Feature Request: Add 'open' as an option.

[dwkns]

The previous BrowserSync dev server had an open: true option that would open the browser window when the server started.

Would be nice to have that added back in. This horrible hack (nearly) works:

// server.js
const DEFAULT_OPTIONS = {
...
 open: false,           // Open URL in browser on launch.
...

and

// server.js → get server()
...
this._server.on("listening", (e) => {
  this.setupReloadNotifier();
  let { port } = this._server.address();

  let hostsStr = "";
  if(this.options.showAllHosts) {
    // TODO what happens when the cert doesn’t cover non-localhost hosts?
    let hosts = devip().map(host => `${this._serverProtocol}//${host}:${port}${this.options.pathPrefix} or`);
    hostsStr = hosts.join(" ") + " ";
  }

  this.logger.info(`Server at ${hostsStr}${this._serverProtocol}//localhost:${port}${this.options.pathPrefix}${this.options.showVersion ? ` (v${pkg.version})` : ""}`);

  if(this.options.open) {
    this.logger.info(`Opening in browser...`);
    require('out-url').open(`${hostsStr}${this._serverProtocol}//localhost:${port}${this.options.pathPrefix}`);
  }

});


return this._server;
...

But adds a dependency and if you change the open option from true to false in .eleventy.js while the server is running it opens the browser again. I'm sure there is a much better way to do this.

[dwkns]

Incase anyone else comes here looking, here is an equally hacky workaround:

// .eleventy.comfig.js
const PORT = 8100 // use a port you are reasonably sure is not in use elsewhere

module.exports = (eleventyConfig) => {

  eleventyConfig.on('eleventy.after', async () => {
    // Run me after the build ends
    require('out-url').open(`http://localhost:${PORT}`);
  });

 eleventyConfig.setServerOptions({
    port: PORT,
  })

It will re-open the browser if you update your config file but it's something.

[NathanBowers]

@dwkns Also kinda hacky and requires the wait-on package, but here's what I do:

In package.json

"scripts": {
   "start": "npx @11ty/eleventy --serve --incremental & wait-on http://localhost:8080/ && open http://localhost:8080",
   "more:scripts": "etc...",
  },

So at terminal $npm start starts the sever while wait-on handles waiting for localhost to be ready before opening the browser.

[darthmall]

Additionally, it might be nice to be able to configure what browser is opened. Perhaps a value of true opens the default value, but you can also provide a string that is either a path to an executable to run, or an executable somewhere in $PATH with some special character sequence that represents where in the executed command the URL is placed.

It might also be good to let the browser be selected by an environment variable like ELEVENTY_DEV_SERVER_BROWSER, so that if multiple people are working out of the same repo, one person’s browser of choice isn’t forced on everyone.

For context, I like to use Polypane for development, but I don’t have it set as my default browser.

[EatonZ]

Just upgraded to 11ty 2.0 and was really surprised to see this missing. Hope to see official support soon!

[euro]

This would be a great addition. I vote open: true opens the default browser to the localhost:port. If someone needs to test in other browsers they can manually do that. I think if that's your goal then Browsersync is probably better suited for you anyway because since 11ty server doesn't have that ghost mode follow the scrolling and clicks feature.

[zachleat]

Related to #17

[EatonZ]

Any updates?

[dwkns]

While not exactly an open option, you can do this in the latest dev server with:

import { open } from "out-url";

export default (eleventyConfig) => {
  eleventyConfig.setServerOptions({
    ready: function (server) {
       open('https://www.11ty.dev');
    }
  });
}

[EatonZ]

@dwkns That works for now, thank you!

[ajiho]

any updates? I really need this feature