dev-server.js

'use strict';
var express = require('express');
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');

var config = require('./config/webpack.config');


main();

function main() {
    var port = 4000;
    var ip = '0.0.0.0';

    var app = express();

    app.use(webpackDevMiddleware(webpack(config), {
        publicPath: config.output.publicPath,
        hot: true,
        stats: {
            color: true
        },
    }));

    // XXX: matches too much? how about socket.io?
    app.get('/*', function(req, res) {
        res.sendFile(__dirname + '/index.html');
    });

    app.listen(port, ip, function(err) {
        if(err) {
            return console.error(err);
        }

        console.log('Listening at ' + ip + ':' + port);
    });
}

The problem is that this yields XMLHttpRequest cannot load http://0.0.0.0:4000/socket.io/1/?t=1424354024912. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4000' is therefore not allowed access. so hot loading doesn't work. Maybe /* matches a bit too much?