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

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 qq 20151213180041

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

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Reactions: 8
  • Comments: 19 (1 by maintainers)

Most upvoted comments

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

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

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

Just add this after proxy:

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

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

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.

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

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

@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

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.

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

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?