Skip to content

Instantly share code, notes, and snippets.

@aiphee
Last active September 4, 2020 08:49
Show Gist options
  • Save aiphee/9b488d60b863a8b245f391fe0d340d23 to your computer and use it in GitHub Desktop.
Save aiphee/9b488d60b863a8b245f391fe0d340d23 to your computer and use it in GitHub Desktop.
Webpack dev server with hot reload on remote machine

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.

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;
}
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'
}
]
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment