Automatically open browser

[supersonicclay]

Please add a flag to webpack-dev-server that will automatically open the browser to the configured url.

[SpaceK33z]

Can you test if #329 works as you would expect?

[applemate]

should have option to define which browser to use

[milewski]

and is it possible to open open something else?... let's say open /something/else

[MattyBalaam]

#749

[bennycode]

Is --open exposed to webpack's Node.js API? I would like to do this:

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true,
  inline: true,
  stats: { colors: true },
  headers: { 'Access-Control-Allow-Origin': '*' },
  open: 'http://localhost:8081'
}).listen(8081, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }
  console.log('Listening at http://localhost:8081/');
});

[wesleymostien]

@bennyn did you manage to do this ?

[Lamorale]

In my webpack.config.js:
devServer: { open: false }
does not prevent webpack to open app in new page.
I am using webpack 3.6.0 webpack-dev-server 2.9.1

Does it work for anyone?

[cyrusmith]

For me devServer: { open: false } doesn't work either.

[emilio-martinez]

@SpaceK33z I'm trying to use the open option on a webpack config via the Node API based on https://webpack.js.org/configuration/dev-server/#devserver-open. However, it won't work. Is this supposed to work outside of the CLI?

[gluons]

@emilio-martinez I face the same problem as you.

Seems that open option is only used in CLI.

The open function that's used to open browser appear only in status function.
All files that use status are in bin directory. That mean it works only in CLI.

webpack-dev-server/bin/utils.js

Lines 41 to 89 in d0725c9

	function status (uri, options, log, useColor) {
	const contentBase = Array.isArray(options.contentBase)
	? options.contentBase.join(', ')
	: options.contentBase;
	if (options.socket) {
	log.info(`Listening to socket at ${colors.info(useColor, options.socket)}`);
	} else {
	log.info(`Project is running at ${colors.info(useColor, uri)}`);
	}
	log.info(
	`webpack output is served from ${colors.info(useColor, options.publicPath)}`
	);
	if (contentBase) {
	log.info(
	`Content not from webpack is served from ${colors.info(useColor, contentBase)}`
	);
	}
	if (options.historyApiFallback) {
	log.info(
	`404s will fallback to ${colors.info(useColor, options.historyApiFallback.index || '/index.html')}`
	);
	}
	if (options.bonjour) {
	log.info(
	'Broadcasting "http" with subtype of "webpack" via ZeroConf DNS (Bonjour)'
	);
	}
	if (options.open) {
	let openOptions = {};
	let openMessage = 'Unable to open browser';
	if (typeof options.open === 'string') {
	openOptions = { app: options.open };
	openMessage += `: ${options.open}`;
	}
	open(uri + (options.openPage || ''), openOptions).catch(() => {
	log.warn(
	`${openMessage}. If you are running in a headless environment, please do not use the --open flag`
	);
	});
	}
	}

webpack-dev-server/bin/webpack-dev-server.js

Lines 30 to 36 in d0725c9

	const {
	colors,
	status,
	version,
	bonjour,
	defaultTo
	} = require('./utils');

webpack-dev-server/bin/webpack-dev-server.js

Line 404 in d0725c9

status(uri, options, log, argv.color);

webpack-dev-server/bin/webpack-dev-server.js

Line 419 in d0725c9

status(uri, options, log, argv.color);

So, no way to open browser via Node API. ☹️