React-hot-loader: How to setup react-hot-reload with browsersync?

[gajus]

Using webpack-dev-server with react-hot works as expected. I am starting the server using webpack-dev-server --hot and off it goes.

webpack.config.js:

var webpack = require('webpack'),
    devServer;

devServer = {
    contentBase: __dirname + '/src/endpoint',
    colors: true,
    quiet: false,
    noInfo: false,
    publicPath: '/static/',
    historyApiFallback: true,
    host: '127.0.0.1',
    port: 8000,
    hot: true
};

module.exports = {
    debug: true,
    devServer: devServer,
    context: __dirname + '/src',
    entry: {
        app: [
            'webpack-dev-server/client?http://' + devServer.host + ':' + devServer.port,
            'webpack/hot/only-dev-server',
            './app'
        ]
    },
    output: {
        path: __dirname + '/src/endpoint/static',
        filename: '[name].js',
        publicPath: devServer.publicPath
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.OldWatchingPlugin(),
        // new webpack.NewWatchingPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.NoErrorsPlugin()
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: [
                    /node_modules/
                ],
                loader: 'react-hot'
            },
            {
                test: /\.js$/,
                exclude: [
                    /node_modules(?!\/redux\-immutable)/
                ],
                loader: 'babel'
            }
        ]
    },
    resolve: {
        extensions: [
            '',
            '.js'
        ]
    }
};

I want to use webpack react-hot-reload with browsersync. The primary reason for doing this is:

• Cross-browser testing.
• My CSS files are compiled using gulp.

I have created the following server.js file to start browsersync using webpack-dev-middleware:

server.js:

var browserSync,
    webpack,
    webpackDevMiddleware,
    webpackHotMiddleware,
    webpackConfig,
    bundler;

browserSync = require('browser-sync');
webpack = require('webpack');
webpackDevMiddleware = require('webpack-dev-middleware');
webpackHotMiddleware = require('webpack-hot-middleware');
webpackConfig = require('./webpack.config');
bundler = webpack(webpackConfig);

browserSync({
    server: {
        baseDir: './src/endpoint',

        middleware: [
            webpackDevMiddleware(bundler, {
                publicPath: webpackConfig.output.publicPath,
                noInfo: false,
                quiet: false,
                stats: {
                    colors: true
                }
            }),
            webpackHotMiddleware(bundler)
        ]
    },

    files: [
        './src/endpoint/static/*.css'
    ]
});

The problem is that when I start the server (node ./server.js) I am getting a lot of socket.io 404 errors:

GET http://127.0.0.1:3000/socket.io/?EIO=3&transport=polling&t=1439133876815-45 

XMLHttpRequest cannot load http://127.0.0.1:3000/socket.io/?EIO=3&transport=polling&t=1439133876815-45. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 404.

I have tried looking for where the socket.io is running, e.g.

• http://127.0.0.1:3000/socket.io/?EIO=3&transport=polling&t=1439133876815-45
• http://127.0.0.1:8000/socket.io/?EIO=3&transport=polling&t=1439133876815-45

but it does not seem to be up.

What configuration am I missing?

[gajus]

I have figured it out.

Because we are using webpack-dev-middleware and webpack-hot-middleware, we need to be using webpack-hot-middleware/client instead of 'webpack-dev-server/client?http://[..] in the webpack config, e.g.

var webpack = require('webpack'),
    devServer;

// webpack-dev-server --hot

devServer = {
    contentBase: __dirname + '/src/endpoint',
    colors: true,
    quiet: false,
    noInfo: false,
    publicPath: '/static/',
    historyApiFallback: true,
    host: '127.0.0.1',
    port: 8000,
    hot: true
};

module.exports = {
    // devtool: 'source-map',
    debug: true,
    devServer: devServer,
    context: __dirname + '/src',
    entry: {
        app: [
            // WebpackDevServer host and port
            // 'webpack-dev-server/client?http://' + devServer.host + ':' + devServer.port,
            // 'webpack/hot/only-dev-server',

            'webpack/hot/dev-server',
            'webpack-hot-middleware/client',

            './app'
        ]
    },
    output: {
        path: __dirname + '/src/endpoint/static',
        filename: '[name].js',
        publicPath: devServer.publicPath
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.OldWatchingPlugin(),
        // new webpack.NewWatchingPlugin(),
        // https://github.com/webpack/docs/wiki/optimization#deduplication
        new webpack.optimize.DedupePlugin(),
        new webpack.NoErrorsPlugin()
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: [
                    /node_modules/
                ],
                loader: 'react-hot'
            },
            {
                test: /\.js$/,
                exclude: [
                    /node_modules(?!\/redux\-immutable)/
                ],
                loader: 'babel'
            }
        ]
    },
    resolve: {
        extensions: [
            '',
            '.js'
        ]
    }
};

[kevinSuttle]

For future reference: https://github.com/Browsersync/recipes/tree/master/recipes/webpack.react-hot-loader