remote dev VPS webpack-dev-server nginx setup

explanation.md

Remote Dev machine webpack-dev-server HMR + static serving combo

Make sure you have port 8080 (or whatever you use) open on the remote machine!! Don't be like Vinney.

I'm no webpack expert (in fact this is the first project I've set up by hand ever...), but if you know what you're doing you should be able to change the relevant parts of this to fit your project:

# webpack.config.js

module.exports = {
  entry: {
    app: './src/index.js',
  },
  devtool: 'inline-source-map',
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Output Management',
      filename: path.resolve(__dirname, 'dist/index.html'),
      template: path.resolve(__dirname, 'src/index.html'),
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    # !! here are the important parts !!
    disableHostCheck: true,
    host: '0.0.0.0',
    port: '8080',
    hot: true
  },
  output: {
    filename: 'js/[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  }
};

Then for the nginx setup on your remote machine. Make sure you don't have anything else running on these ports. What's going on is nginx gets two different domain server_name requests and sends them to two different places:

• dev. gets served the static /dist folder
• live-dev. gets proxied over to the webpack-dev-server server running on port 8080.

# nginx conf file

upstream some_arbitrary_name_here {
  server 127.0.0.1:8080;
}

server {
  listen 80;

  # use your built /dist folder location here:
  root /some/root/maybe/www/dist;

  index index.html;

  server_name dev.YOUR-DOMAIN.com;

  location / {
    try_files $uri $uri/ =404;
  }
}

server {
  listen 80;

  # notice the different subdomain here:
  server_name live-dev.YOUR-DOMAIN.com;

  location / {
    proxy_pass http://some_arbitrary_name_here/;
    proxy_redirect off;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
}