title: Is it possible to use Webpack-Hot-Middleware with NGINX on server side?
body: <p>I am working on a project for a client and I need to use webpack's Hot Module Replacement feature. I am using an express (node) application behind NGINX. I am using many javascript frameworks to design the application, React happens to be one of them. </p>
  
  <p>I will be using the HMR feature. </p>
  
  <p>I have a webpack.config.js like this :</p>
  
  <pre><code>var webpack = require('webpack');
  var ExtractTextPlugin = require("extract-text-webpack-plugin");
  var merge = require('webpack-merge');
  var validate = require('webpack-validator');
  var CleanWebpackPlugin = require('clean-webpack-plugin');
  var styleLintPlugin = require('stylelint-webpack-plugin');
  
  //breaking up into smaller modules
  //commons module
  //first
  var start = {        
   context : __dirname ,
  
   //entry point defination
   entry : { 
      app : ['./require.js','webpack-hot-middleware/client?https:127.0.0.1:8195'], 
      vendor : ['angular','angular-animate','angular-messages','angular-aria','angular-route','angular-material','react','react-dom',''webpack-hot-middleware/client?https:127.0.0.1:8195'']
  
   },
   //output defination
   output : {
      path : './public/dist',
    publicPath: 'https://127.0.0.1:8195/public/dist/',
      filename : 'app.bundle.js'
   },
   module: { preLoaders: [
        {
          test: /\.(js|jsx)$/,
           exclude: /(node_modules|bower_components)/,
          loaders: ['eslint']
        }    
      ],
      loaders: [
              {test: /\.js$/, loader: 'ng-annotate!babel?presets[]=es2015!jshint', exclude: /node_modules/},
              {
                  test: /\.css$/,
                  exclude: /(node_modules|bower_components)/,
                  loader: ExtractTextPlugin.extract("style-loader", "css")
              },
              {
                  test: /\.less$/,
                  exclude: /(node_modules|bower_components)/,
                  loader: ExtractTextPlugin.extract("style", "css!less")
              },
              {
                  test: /\.scss$/,
                  exclude: /(node_modules|bower_components)/,
                  loader: ExtractTextPlugin.extract("style", "css!sass")
              },
              {
                  test: /\.jsx?$/,
                  exclude: /(node_modules|bower_components)/,
                  loaders: ['react-hot', 'babel'],
  
              },
              {
                  test: /\.woff2$/,
                  loader: 'url'
              }
  
          ]
      },
   plugins: [
  
      new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js"),
      new webpack.DefinePlugin({
       "process.env": {
            NODE_ENV: JSON.stringify("production")
        }
      }),
      new ExtractTextPlugin("styling.css", {allChunks: true}),
      new ExtractTextPlugin("styling.css", {allChunks: true}),
      new ExtractTextPlugin("styling.css", {allChunks: true}),
      //new webpack.optimize.UglifyJsPlugin({
      //compress: {
       //  warnings: false
      // },
  
   //}),
   //   new webpack.optimize.DedupePlugin(),
    //  new webpack.optimize.OccurrenceOrderPlugin(), 
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin()
    ],
    //target: 'web'
  };
  
  var config;
  
  // Detect how npm is run and branch based on that
  //choose modules
  //all modules
  switch(process.env.npm_lifecycle_event) {
    case 'build':
      config = merge(start);
      break;
    default:
      config = merge(start);
  }
  
  //export config
  module.exports = validate(config); 
  </code></pre>
  
  <p>My app.js file includes : </p>
  
  <pre><code>app.set('views', path.join(__dirname, 'views'));
  app.set('view engine', 'ejs');
  //webpack development server integration 
  app.use(require("webpack-dev-middleware")(compiler, {
      noInfo: false, stats: { colors: true,
              chunks: true, 
              'errors-only': true }, headers: { "X-Custom-Header": "yes" },  publicPath: webpackConfig.output.publicPath
  
  }));
  app.use(require("webpack-hot-middleware")(compiler, {
     log: console.log
  }));
  </code></pre>
  
  <p>My NGINX file includes </p>
  
  <pre><code>location / {
  ...
  proxy_pass  https://127.0.0.1:8195; 
  ...
  ...
  } 
  </code></pre>
  
  <p>When I open <a href="https://127.0.0.1:8195" rel="noreferrer">https://127.0.0.1:8195</a>. Then files are created and served up. Express listens on 8195 port. 
  But when I open the <a href="https://domain-name.com" rel="noreferrer">https://domain-name.com</a>, the files aren't served but NGINX doesn't show 502 error. </p>