Webpack dev server with hot reload on remote machine

readme.md

Stripped down confing from our setup, i tried to follow multiple articles but none worked on it self so i had to combine them for our purpose.

It works like this, your modules are served from addres js/compiled/webpack_hot which is managed by nginx, when you go there, nginx passes control to local port 9821, webpack dev server is running on this port.

nginx.conf

http {
  upstream webpack_hot_server {
    server 127.0.0.1:9821;
  }
}


location ~ /js/compiled/webpack_hot/.*\.(js|json)$ {
  # Pass these requests to upstream of `yarn dev-hot` (webpack dev server)
  proxy_pass http://webpack_hot_server;
  break;
}

webpack-hot.js

const webpack = require('webpack');

module.exports = {
    mode: 'development',
    devtool: 'eval-source-map',
    entry: myEntrypoints,
    devServer: {
        disableHostCheck: true,
        host: '0.0.0.0',
        port: 9821,
        hot: true,
        // hotOnly: true, uncomment when debugging why hot reload not working
        headers: {
            'Access-Control-Allow-Origin': '*',
        },

        /*
        DISABLED FOR NOW http

        https: true,
        key: fs.readFileSync(`*privkey.pem`),
        cert: fs.readFileSync(`*cert.pem`),
        ca: fs.readFileSync(`*chain.pem`),
        */
    },
    output: {
        publicPath: `http://mydomain:${PORT}/`,
        filename: `js/compiled/webpack_hot/[name].js`,
        chunkFilename: `js/compiled/webpack_hot/[name].chunk.js`,
        path: path.join(__dirname, '../../www')
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ], 
    resolve: {
        extensions: ['.js', '.ts', '.tsx'] // These files will be manipulated with
    },
    module: {
        rules: [
            {
                test: /\.[jt]sx?$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            }
        ]
    }

};