Webpack-dev-server: Can not access webpacl-dev-server through LAN?

[littlee]

I using webpack-dev-server for developing,
and I wanted to test some page in my mobile phone which connect to the same wifi with my laptop.
but I can not access in my mobile phone.

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var I18nPlugin = require('i18n-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var languages = {
    'en_US': null,
    'zh_CN': require('./js/i18n/zh_CN.json'),
    'vi_VN': require('./js/i18n/vi_VN.json')
};

module.exports = Object.keys(languages).map(function(language) {
    return {
        name: language,
        entry: [
            'webpack-dev-server/client?http://localhost:3333',
            'webpack/hot/dev-server',
            './js/app.js'
        ],
        output: {
            path: path.join(__dirname, 'build'),
            filename: language + '.bundle.js',
            publicPath: '/build/'
        },
        module: {
            loaders: [{
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader', {
                    publicPath: './'
                })
            }, {
                test: /\.less$/,
                loader: 'style-loader!css-loader!less-loader'
            }, {
                test: /\.(ttf|eot|svg|woff(2)?)(\?v=[\d.]+)?(\?[a-z0-9#-]+)?$/,
                loader: 'file-loader'
            }, {
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader?limit=8192'
            }, {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015']
                }
            }]
        },
        plugins: [
            // new webpack.optimize.UglifyJsPlugin(),
            new I18nPlugin(
                languages[language]
            ),
            new ExtractTextPlugin('bundle.css'),
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NoErrorsPlugin()
        ]
    };
});

server.js (config for webpack dev server)

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.js');

var PORT = 3333;

new WebpackDevServer(webpack(config), {
    publicPath: '/build/',
    hot: true,
    historyApiFallback: true,
    stats: { colors: true }
}).listen(PORT, 'localhost', function(err) {
    if (err) {
        console.log(err);
    }

    console.log(':::Server Running::: ==> localhost:' + PORT);
});

open localhost in my laptop

but I can not open http://[my-laptop-ip]:3333 in my mobile phone

[glebmachine]

It's the most important feature in local dev server(

[glebmachine]

@littlee
--host xxx.xxx.xxx.xxx will fix it.

[littlee]

yo~

How do I specify this option if I use the API way?
https://webpack.github.io/docs/webpack-dev-server.html#api

[glebmachine]

Just add this after proxy:

host : 'xxx.xxx.xxx.xxx',

*Don't forget to replace xxx to your LAN ip

[littlee]

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.js');

var PORT = 3333;

new WebpackDevServer(webpack(config), {
    publicPath: '/build/',
    hot: true,
    historyApiFallback: true,
    stats: {
        colors: true
    },
        host: '192.168.11.98'
}).listen(PORT, 'localhost', function(err) {
    if (err) {
        console.log(err);
        return;
    }
    console.log(':::Server Running::: ==> localhost:' + PORT);
});

@glebmachine after adding host config,

it still does not work

can you show me your working config file?

[glebmachine]

Hi @littlee!
I'm using CLI command.
Just add --host 10.0.1.4 to the end of command.

webpack --host 10.0.1.4

[glebmachine]

Oh, git it.

.listen(PORT, '192.168.11.98', function(err) {
    if (err) {
        console.log(err);
        return;
    }
});

You need to replace localhost to your ip.

[glebmachine]

Hi @sokra, again)

How do i listen all request to my ip (with aliases like localhost or whatever)?
Much appreciated for help)

Use case: I can't to access to WDS by 127.0.0.1 and internal network address like 192.168.10.180 simultaneously.

[glebmachine]

Damn, i had achieve that by set --host 0.0.0.0!
Thank you btw)

[adamreisnz]

In case you get some 404's in your browser when trying to access from LAN IP, make sure to remove the publicPath setting, or at least not hardcode it to localhost or an IP, as it will break resource loading.

[PierBover]

I set it like this:

webpack-dev-server --inline --content-base build/ --host 192.168.100.102

You probably don't need the inline and content-base options.

In my package.json set up a command that I run with npm run dev:

"scripts": {
  "dev": "webpack-dev-server --inline --content-base dev-build/ --host 192.168.100.102"
}

[SpaceK33z]

@PierBover, thanks for your example.

Closing this, since there is no real problem and this is documented on the wiki as well.

[chenzhenxi]

FYI: For people who are using API.
Equivalent to --host 0.0.0.0 is .listen(PORT, '0.0.0.0');.

[Birowsky]

What are you folks calling .listen() on?

[mkarajohn]

Is there a way to have this work with --open as well?

If I do --host 0.0.0.0 --open the browser opens at 0.0.0.0 which is not what we want.

If I do --host 0.0.0.0 --public localhost --open the browser opens at localhost which is not what we want, because there is no port specified

If I do --host 0.0.0.0 --public localhost:8080 --open the browser opens at localhost:8080 which is not ideal, because I may have another local server running at 8080 at that moment.

So, ideally, is there a way to have this work with --open while also automatically opening it on localhost on the correct port?

[Peripona]

Using --open works perfectly with this config.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --inline --content-base ./ --host 192.168.2.89 --port 3001 --open",
    "prod": "webpack -p"
  }

npm start will use the correct ip and port and will open the app correctly

[joetidee]

As I am using DHCP, is there a way to specify the --host IP address dynamically?

[markus-willems]

@joetidee you can use --host 0.0.0.0. From Wikipedia: In the context of servers, 0.0.0.0 can mean "all IPv4 addresses on the local machine". If you try to access your dev server via hostname (e.g. myDevServerMachine:8080) and get the Invalid Host header error, you have to set the allowedHosts option or set the disableHostCheck option to true (read the docs before doing so though).

With allowedhosts: webpack-dev-server --host 0.0.0.0 --allowed-hosts myDevServerMachine

With disableHostCheck: webpack-dev-server --host 0.0.0.0 --disable-host-check

[reuwi]

@mkarajohn I couldn't stop cursing the sucking configuration of webpack, I spent all the afternoont to find that there is no good way to solve this problem, fuck.....