webpack-dev-server: Server can't be accessed via IP

1.8.0 appears to be defaulting to "localhost’ now. You can open it up by passing the --host option. webpack-dev-server --port 3000 --hot --host 0.0.0.0

It can also be set from the webpack file by setting devServer.host to 0.0.0.0.

devServer: {
    host: '0.0.0.0',
    port: 8080,
    ...
  }

the hardcoded IP wouldn’t work for me @peacechen - I was able to get mine to work by disabling disableHostCheck. eg.

devServer: {
    contentBase: '.',
    host: '0.0.0.0',
    port: 3000,
    disableHostCheck: true
  },

If you’re using WebpackDevServer, be aware that the host argument is part of server.listen as follows:

  var server = new WebpackDevServer(webpack(webpackConfig), {
    ...
  });
  server.listen(port, "0.0.0.0", function(err) { ...

I had to do the following to get mine to work with the help from @pdillon and his comment

I have Windows 7 so I did

ipconfig

Then went up to LAN and found the ipv4 address Mine was

192.168.0.12

So I edited my npm run start command to be

"start": "webpack-dev-server --inline --port 8080 --host 192.168.0.12 --content-base ."

I was then able to access the content that is being served on

localhost:8080

Will be available as the web on another computer by going to

192.168.0.12:8080

In the web browsers URL field on the other computer that was connected to the same wifi network

oh my god

  devServer: {
    historyApiFallback: true,
    noInfo: true,
    contentBase: './dist',
    host: '0.0.0.0',
    hot: true,
    open: true,
    historyApiFallback: true,
    inline: true
  }

I turn on the open switch, then the browser will open ‘http://0.0.0.0:8080/’. But 0.0.0.0 is not accessible.

just FYI, you can just type 0 instead of 0.0.0.0 for ease of use 😃

Using host: '0.0.0.0' in the devServer section of webpack.config does allow the server to be seen by peers on the LAN, but iOS Safari complains with “Invalid Host header”. The only way to get Safari to load is to hard code the IP 😦

@anchengjian Use public: 'http://localhost:' + PORT, if you want to keep auto open using open: true and dont want to end up with 0.0.0.0 in browser, which is unreachable.

Ahh. Good to know. Thanks!

Perhaps it’s worth to point out that in order to access the webpack-dev-server from other devices on your local network you need to pass --public your-host:port since version 2.4.3.

See https://github.com/webpack/webpack-dev-server/issues/882.

Maybe add this to the top of this thread if possible?

For anyone who are using vue webpack template, this issue can be solved by config the config/index.js, find the config of host then change the value to 0.0.0.0, like below:

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    

    // Various Dev Server settings
    host: '0.0.0.0', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false
  }
  // ... ... other config ignored here
}

@anchengjian Here are some piece code of my server.js

const compiler = webpack(config);
new WebpackDevServer(compiler, config.devServer)
.listen(config.port, '0.0.0.0', (err) => {
  if (err) {
    console.log(err);
  }
  console.log('Listening at localhost:' + config.port);
});

In listen function ,the second param set ‘0.0.0.0’ , maybe can solve this problom.

Thanks @pdillon, just got gatsby 1.1.11 to work with:

gatsby develop --host 0.0.0.0

Is there a way to dynamically generate the --host IP address in the package.json file or with a setting in webpack.config.js? I am currently using 0.0.0.0, but it has been suggested that this is insecure.

@erikyuzwa thanks

How did I use express to do?

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  hot: true,
  stats: {
    colors: true,
    chunks: false
  }
})

// use express
app.use(devMiddleware)

app.listen(port, host, function (err) {
  if (err) {
    console.log(err)
    return
  }
  console.log('Listening at ' + host + ':' + port + '\n')
})

It didn’t work!