webpack-dev-server hot loading not working with boot2docker

Question

I am currently trying to get webpack-dev-server working with hot loading, through boot2docker.

I have files changes being picked up correctly in my container, by using docker-osx-dev, but the socket.io hot reloading is not working.

The reason being that I set --host 0.0.0.0 when running the server, so that it would be accesible on my host machine. This meant, however, that it is looking for the socket.io server at 0.0.0.0.

So when I load the page, it tries to connect to http://0.0.0.0:8080/socket.io/?EIO=3&transport=polling&t=1434584701670-0 and I get an error in my consul. In reality it should be connecting to http://dockerhost:8080/socket.io/.

Is there anyway to tell webpack-dev-server to use a different host to get the socket.io connection?

The Github issue 63 may refer to the same problem, but is unresolved.

Answer 1

So I realized that even though it was giving me an error in the console, by trying to connect to the wrong host, it was also connecting to the right host so hot loading did work.

In the end, my config looked something like this:

var entry = ["./config/mainApp"];
var loaders = {
    "jsx": ["react-hot", "babel-loader?stage=0"]
    "js": {
        loader: "babel-loader?stage=0",
        include: path.join(__dirname, "app")
    },
    "json": "json-loader",
    "json5": "json5-loader",
    "txt": "raw-loader",
    "png|jpg|jpeg|gif|svg": "url-loader?limit=10000",
    "woff|woff2": "url-loader?limit=100000",
    "ttf|eot": "file-loader",
    "wav|mp3": "file-loader",
    "html": "html-loader",
    "md|markdown": ["html-loader", "markdown-loader"],
    "css": "style-loader!css-loader"
};
var preloaders = {
    "js": "source-map-loader"
};
var plugins = [
    new webpack.PrefetchPlugin("react"),
    new HtmlWebpackPlugin({
        inject: true,
        template: "app/index.html"
    }),
    new webpack.PrefetchPlugin("react/lib/ReactComponentBrowserEnvironment")
];
module.exports = {
    entry: entry,
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundle.js",
        sourceMapFilename: "bundle.map",
        pathinfo: true
    },
    module: {
        loaders: loadersByExtension(loaders),
        preloaders: loadersByExtension(preloaders)
    },
    devtool: "eval-source-map",
    debug: true,
    resolve: {
        root: path.join(__dirname, "app"),
        extensions: ["", ".web.js", ".js", ".jsx"]
    },
    plugins: plugins,
    devServer: {
        port: 8080,
        host: "0.0.0.0",
        inline: true
    }
};

and I started it like this:

webpack-dev-server --config webpack-hot-dev-server.config.js --colors --progress --hot

For a full example, check out my the initial stages of my app that just has this boilerplate + react

Answer 2

I switched to using https://github.com/brikis98/docker-osx-dev which uses rsync to sync files between OS X and the container and also adds a hosts entry for http://dockerhost that allowed socket.io to poll the container correctly from the OS X web browser.

Answer 3

After some hours of searching i have found, that inline option just adds entry point. You can fix this error by replacing options.host (which is 0.0.0.0 in your case) with localhost, or some other host.

The easiest way to detect file changes is to set watchOptions.poll to true.

Answer 4

After some head scratching here is the solution:

1- Add a hostname to /etc/hosts

YOUR_DOCKER_MACHINE_IP    devapp (or any other hostname you choose)

2- In your webpackconfig entry

entry: 
    main: [
        'webpack-dev-server/client?http://devapp:YOUR_EXPOSED_PORT',
        'webpack/hot/only-dev-server',
        YOUR_SCRIPT_FILE
    ]
}