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

[aputinski]

In 1.7.0 the following command:

webpack-dev-server --port 3000 --hot

would allow the server to be accessed at:

http://localhost:3000 and
http://10.0.1.4:3000 (my local IP).

In 1.8.0 accessing http://10.0.1.4:3000 no longer works.

Not sure if this has to do with webpack-dev-server or one of the dependencies.

I'm using node 0.12.2 and running OSX 10.10.2

[pdillon]

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

[aputinski]

Ahh. Good to know. Thanks!

[liyatang]

thanks。

[honger05]

thanks。

[mikhuang]

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) { ...

[BUPT-HJM]

thanks

[Lumersgo]

thanks

[honger05]

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!

[cunjieliu]

thanks a lot!

[meastes]

@honger05 It'm not sure where the host and port are being set in your code, but you would want to make sure host is set to '0.0.0.0' instead of 'localhost'.

[caisah]

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,
    ...
  }

[Mr111222]

oh my god

[anchengjian]

  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.

[Lumersgo]

@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.

[zzwfe]

@caisah good to know.ths

[cotyembry]

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

[tr4g]

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

[ArminSheng]

@honger05 Add host: '0.0.0.0' to your devMiddleware config, just like below, it works to me.

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

[peacechen]

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 :(

[erikyuzwa]

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
  },

[akemando]

pdillon ... you are the man!! Thanks a bunch

[ChenPt]

@erikyuzwa thanks

[codingedward]

goodness, thanks

[joetidee]

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.

[tomholford]

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

gatsby develop --host 0.0.0.0

[ZengTianShengZ]

thanks

[jwenjian]

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
}

[vijaykumar91]

Its working for me thanks

[konuch]

@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.

[jessevdp]

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?

[sytpb]

how to change with the create-react-app and express code ,it didn't work. i don't know which file to be change .