Local area network visit node server with webpack-dev-server

Question

I build a app with Express, React and Webpack. I used webpack-dev-server and react-hot-loader to live-loding.

The Express server is on port 3000 and the webpack-dev-server servers files on localhost:8080.

Now I want to visit the app from another client in the local area network. I can visit the development machine IP:3000, but can not access the localhost:8080

My webpack.config.dev.js file is:

var webpack = require('webpack');

module.exports = {
    devtool: 'inline-source-map',
    entry: [
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server',
        './src/client/entry',
    ],
    output: {
        path: __dirname + '/public/js',
        filename: 'app.js',
        publicPath: 'http://localhost:8080/public/js',
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            "process.env": {
                BROWSER: JSON.stringify(true)
            }
        })
    ],
    resolve: {
        extensions: ['', '.js', '.jsx', '.css']
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            loader: 'react-hot',
            exclude: /node_modules/
        }, {
            test: /\.jsx?$/,
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015'],
                compact: false
            },
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            loader: 'style-loader!css-loader',
            exclude: /node_modules/
        }, ]
    }
}

and the HTML is:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="public/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
  <div id="app">{{ content|safe }}</div>
  <script src="http://localhost:8080/public/js/app.js"></script>
</body>
</html>

the webpack-dev-server is

import WebpackDevServer from "webpack-dev-server";
import webpack from "webpack";
import config from "../../webpack.config.dev";

var server = new WebpackDevServer(webpack(config), {
  // webpack-dev-server options
  publicPath: config.output.publicPath,
  hot: true,
  stats: { colors: true },
  headers: { "Access-Control-Allow-Origin": "*" }
});

server.listen(8080, "localhost", function() {});

I hope I can keep live-reloading on my local development machine and other computer or mobile phone can access the server and static files via development machine IP:3000

I am not familiar with webpack. I just followed some tutorials to build the development environment.

How should I change the config?

So, you are serving the HTML file on port 3000 with Express and the app.js on port 8080 with webpack-dev-server, right? And are both servers in the same machine? Why not serve everything with one server? — dreyescat
@dreyescat Because the webpack-dev-server works like that. I tried webpack-dev-middleware which provide the bundled file on one server but the hot reloading works bad with it because the server started by nodemon will auto restart when file changed. — Brick Yang

dreyescat dreyescat · Accepted Answer · 2015-12-19T08:54:21

If you want to accept connections from other machines other than localhost you need to configure the hostname parameter in your server.listen call. In your case you are just allowing connections on "localhost":

server.listen(8080, "localhost", function() {});

For example, to accept connections on any address just remove that parameter:

server.listen(8080, function() {});

Check server.listen for more info.

Local area network visit node server with webpack-dev-server

1 Answers