Webpack launch browser automatically

Question

Gulp + live reload serves up my content on localhost and (here's what I'm after) launches the browser automatically at the server url whenever i run the gulp command (i.e I don't have to click the browser icon and navigate to the url manually). Can this be done in Webpack too?

I've tried a plugin called open-browser-webpack-plugin, but I could not get it to work.

I don't want to launch a `webpack-dev-server`, so I used `open-browser-webpack-plugin` and could get it to work. (I use real express server, BTW; but it launches faster than `webpack --watch`). — Polv, Apr 03 '19 at 12:07

score 85 · Accepted Answer · edited Nov 21 '19 at 09:12

85

For webpack version 2.x, you just add --open open to the CLI as documented here:

https://webpack.js.org/configuration/dev-server/#devserver-open

Alternatively, add the following config to your webpack.config.js:

devServer: {
  open: true
}

edited Nov 21 '19 at 09:12

Yuval Adam

149,388
85
287
384

answered Sep 28 '16 at 16:42

HDave

20,105
26
133
216

6

one issue I found is it starts to open the link before the files build are finished. It will be better if it opens the link when everything is ready. – new2cpp Nov 13 '16 at 05:31
In package.json remove the value of dev in scripts `--open` It will auto open browser – Akshat Zala Aug 24 '20 at 05:21
@new2cpp will [this](https://stackoverflow.com/a/67647752/5457113) work for you? – dasfdsa May 22 '21 at 09:03

score 11 · Answer 2 · answered Aug 27 '16 at 10:18

11

Emelet answer is not false at all, however it won't work in Windows. I do this with:

"scripts": {
    "start": "start http://localhost:8000/ & webpack-dev-server"
}

100% working and you don't have to install any module or plugin.

answered Aug 27 '16 at 10:18

Enzo Ferey

161
2
6

Thanks a lot, it worked for me! – hot_penguin May 01 '21 at 17:36

swelet · Answer 3 · 2019-07-03T08:14:50.580

9

For those using Node.js (and npm): put the command in the npm start script:

MAC

"scripts": {
    "start": "webpack-dev-server & open http://localhost:8080/"
  }

WINDOWS

"scripts": {
    "start": "start http://localhost:8000/ & webpack-dev-server"
}

Thanks to Enzo Ferey for pointing out that the command needs to look different when on Windows.

edited Jul 03 '19 at 08:14

answered Dec 20 '15 at 22:28

swelet

7,118
5
27
40

The problem is that you don't take into account webpack config. You've hardcoded `http://localhost:8080/` URL and it's not always the case. But as a workaround it might work. – WhiteAngel Mar 02 '16 at 08:53
This is what I do but I find that I have to pkill the server if I Ctrl-C to break out of it. Any way around this? – dancow Jun 14 '16 at 18:00
@DanNguyen yeah me too. The problem however does not pertain to this particular way of starting the app, it's related to webpack-dev-server in general. – swelet Jun 15 '16 at 11:26

score 5 · Answer 4 · answered Mar 14 '18 at 10:47

5

To launch the browser, one can add --open to CLI command as the accepted answer points it out

npm start --open

or

ng serve --open

To avoid doing it all the time: there is a simple change to make in package.json

"scripts": {
    "ng": "ng",
    "start": "ng serve --open",
    ...
  },

answered Mar 14 '18 at 10:47

edkeveked

14,876
8
45
80

1

This looks amazing as it opens the browser just in time after the bundle is loaded and has the simplest syntax. many thanks! – krankuba Jul 11 '19 at 13:20
This is for angular, yes? – Dror Bar Dec 20 '20 at 07:46
yes it works for angular if you update your package.json – edkeveked Dec 20 '20 at 10:55

score 4 · Answer 5 · edited May 23 '17 at 12:25

In a previous comment, I noted that the currently accepted answer does work but it has the side effect of spawning a process that needs to be manually killed. I've since figured out the more canonical way of initiating a browser open action without using a separate webpack plugin.

That said, you do need to install a more general npm package: open

Then create a new file at your project folder named server.js. Here's a sample implementation (note that it is in ES6):

'use strict';
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config');


const open = require('open');
const port_number = 8080;

let target_entry = 'http://localhost:' + port_number + '/';
config.entry.unshift("webpack-dev-server/client?" + target_entry);

new WebpackDevServer(webpack(config), {contentBase: 'src', hot: true, stats: { colors: true }, publicPath: '/assets/'})
.listen(port_number, 'localhost' , (err) => {
  if (err) {
    console.log(err);
  }
  console.log('Listening at localhost:' + port_number );
  console.log('Opening your system browser...');
  open(target_entry);
});

Note that this line:

config.entry.unshift("webpack-dev-server/client?" + target_entry);

-- Means you can remove the call to webpack-dev-server/client?... from webpack.config.js, as this unshift command will insert the line into config.entry...this is a helpful modularization for when you need to set up an app with multiple environments and different entry points.

Finally, in package.json, this is what the start command should look like: a call to node to run server.js:

  "scripts": {
    "start": "node server.js",
   //...
  }

score 2 · Answer 6 · answered Jul 12 '18 at 22:55

directory/folder: package.json

{
  "devDependencies": {
  "babel-core": "^6.26.3",
  "babel-loader": "^7.1.5",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "webpack": "^4.16.0",
  "webpack-dev-server": "^3.1.4"
},
  "name": "",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "description": "",
  "author": "",
  "private": false,
  "scripts": {
    "start": "webpack-dev-server --open --watch"
 },
  "dependencies": {
    "webpack-cli": "^3.0.8"
  }
}

This start script will run the dev server, and both automatically open and update (on-save) the web page. This is for WebPack 4.

Thanks for answering, but this has allready been given in the accepted answer. Its the --open that does it. — swelet, Jul 13 '18 at 16:00

score 1 · Answer 7 · answered Oct 24 '15 at 19:05

1

Ive had success using BrowserSync with webpack.

In webpack.config.js I include this:

var options = {
    port: 9001,
    host: 'localhost',
    server: {
        baseDir: './public'
    },
    ui: {
        port: 9002
    },
    startPath: process.argv[3].substr(2),
}

var browserSync = require('browser-sync');
browserSync(['public/**/*.*'],options);

answered Oct 24 '15 at 19:05

timthez

156
1
8

3

Thanks a bunch for your answer @thimthez, however BrowserSync looks like a rather big machine to take in to handle such a small thing. Maybe automatic launching of the browser is included, but so are things like "Interaction sync", "UI or CLI control" and "URL History" (according to their homepage). To clarify: Hot loading is not the issue here, just opening the browser automatically and navigating to a specified url when running the "webpack" command. Thanks for helping me clarify the question! – swelet Oct 24 '15 at 20:07

score 1 · Answer 8 · answered Sep 13 '18 at 13:35

1

Launch browser automatically and it is also possible to specify a page when opening the browser with webpack 4.

"scripts": {
   ...
   "start": "webpack-dev-server --open-page index2.html"
}

answered Sep 13 '18 at 13:35

riversun

528
5
9

score 0 · Answer 9 · answered Jul 21 '20 at 05:06

You can configure devServer

const merge = require('webpack-merge');
const common = require('./webpack.base.config.js');
const path = require('path');

module.exports = merge(common, {
  mode: 'development',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 3000,
    hot:true,
    compress: true,
    open:"Chrome",
    openPage:'index.html'
  },
});

score 0 · Answer 10 · answered May 22 '21 at 09:02

Accepted answer will work but it will open your browser will even when compiled bundles arent ready, as mentioned in the comments. Following approach solves this problem:

    const { WebpackOpenBrowser } = require('webpack-open-browser'); // use any plugin to open browser

    const PORT = 8080;

    devServer: {
      open: false
    }
    
    plugins: [
      ...
      new WebpackOpenBrowser({ url: `http://localhost:${PORT}`}),
    ]

Webpack launch browser automatically

10 Answers10

Linked