New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Server can't be accessed via IP #147

Closed
aputinski opened this Issue Apr 2, 2015 · 31 comments

Comments

Projects
None yet
@aputinski

aputinski commented Apr 2, 2015

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

This comment has been minimized.

Show comment
Hide comment
@pdillon

pdillon Apr 6, 2015

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

pdillon commented Apr 6, 2015

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

This comment has been minimized.

Show comment
Hide comment
@aputinski

aputinski Apr 6, 2015

Ahh. Good to know. Thanks!

aputinski commented Apr 6, 2015

Ahh. Good to know. Thanks!

@liyatang

This comment has been minimized.

Show comment
Hide comment
@liyatang

liyatang commented Dec 12, 2015

thanks。

1 similar comment
@honger05

This comment has been minimized.

Show comment
Hide comment
@honger05

honger05 commented Jan 20, 2016

thanks。

@mikhuang

This comment has been minimized.

Show comment
Hide comment
@mikhuang

mikhuang Feb 17, 2016

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

mikhuang commented Feb 17, 2016

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

This comment has been minimized.

Show comment
Hide comment
@BUPT-HJM

BUPT-HJM commented May 12, 2016

thanks

1 similar comment
@Lumersgo

This comment has been minimized.

Show comment
Hide comment
@Lumersgo

Lumersgo commented Jul 4, 2016

thanks

@honger05

This comment has been minimized.

Show comment
Hide comment
@honger05

honger05 Jul 19, 2016

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!

honger05 commented Jul 19, 2016

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

This comment has been minimized.

Show comment
Hide comment
@cunjieliu

cunjieliu Jul 26, 2016

thanks a lot!

cunjieliu commented Jul 26, 2016

thanks a lot!

@meastes

This comment has been minimized.

Show comment
Hide comment
@meastes

meastes Aug 5, 2016

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

meastes commented Aug 5, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@caisah

caisah Oct 5, 2016

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

caisah commented Oct 5, 2016

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

This comment has been minimized.

Show comment
Hide comment
@Mr111222

Mr111222 Nov 9, 2016

oh my god

Mr111222 commented Nov 9, 2016

oh my god

@anchengjian

This comment has been minimized.

Show comment
Hide comment
@anchengjian

anchengjian Dec 5, 2016

  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.

anchengjian commented Dec 5, 2016

  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

This comment has been minimized.

Show comment
Hide comment
@Lumersgo

Lumersgo Dec 5, 2016

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

Lumersgo commented Dec 5, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@zzwfe

zzwfe Dec 6, 2016

@caisah good to know.ths

zzwfe commented Dec 6, 2016

@caisah good to know.ths

@cotyembry

This comment has been minimized.

Show comment
Hide comment
@cotyembry

cotyembry Dec 22, 2016

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

cotyembry commented Dec 22, 2016

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

@sebolio

This comment has been minimized.

Show comment
Hide comment
@sebolio

sebolio Mar 1, 2017

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

sebolio commented Mar 1, 2017

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

@ArminSheng

This comment has been minimized.

Show comment
Hide comment
@ArminSheng

ArminSheng Apr 10, 2017

@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
  }
})

ArminSheng commented Apr 10, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@peacechen

peacechen Apr 30, 2017

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

peacechen commented Apr 30, 2017

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

This comment has been minimized.

Show comment
Hide comment
@erikyuzwa

erikyuzwa May 3, 2017

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

erikyuzwa commented May 3, 2017

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

sectore added a commit to input-output-hk/cardano-sl-explorer that referenced this issue May 18, 2017

[CSE-124] Fix port issues with VM
Webpack does not support to access `localhost` of `devServer` from a VM.
Solution is described here: webpack/webpack-dev-server#147 (comment)
@akemando

This comment has been minimized.

Show comment
Hide comment
@akemando

akemando Jun 7, 2017

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

akemando commented Jun 7, 2017

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

@ChenPt

This comment has been minimized.

Show comment
Hide comment
@ChenPt

ChenPt commented Jul 26, 2017

@erikyuzwa thanks

@codingedward

This comment has been minimized.

Show comment
Hide comment
@codingedward

codingedward Jul 27, 2017

goodness, thanks

codingedward commented Jul 27, 2017

goodness, thanks

@joetidee

This comment has been minimized.

Show comment
Hide comment
@joetidee

joetidee Oct 15, 2017

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.

joetidee commented Oct 15, 2017

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

This comment has been minimized.

Show comment
Hide comment
@tomholford

tomholford Oct 23, 2017

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

gatsby develop --host 0.0.0.0

tomholford commented Oct 23, 2017

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

gatsby develop --host 0.0.0.0
@ZengTianShengZ

This comment has been minimized.

Show comment
Hide comment
@ZengTianShengZ

ZengTianShengZ commented Jan 12, 2018

thanks

@jwenjian

This comment has been minimized.

Show comment
Hide comment
@jwenjian

jwenjian Apr 4, 2018

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
}

jwenjian commented Apr 4, 2018

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

This comment has been minimized.

Show comment
Hide comment
@vijaykumar91

vijaykumar91 Apr 10, 2018

Its working for me thanks

vijaykumar91 commented Apr 10, 2018

Its working for me thanks

@konuch

This comment has been minimized.

Show comment
Hide comment
@konuch

konuch May 17, 2018

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

konuch commented May 17, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@jessevdp

jessevdp Aug 13, 2018

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 #882.

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

jessevdp commented Aug 13, 2018

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 #882.

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

@sytpb

This comment has been minimized.

Show comment
Hide comment
@sytpb

sytpb Sep 11, 2018

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

sytpb commented Sep 11, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment