ReactJS: Hot Reload Not working

Question

I am new to react. I created an application using two servers, a prod.server.js which holds all my API's routes, and a dev.server.js which initializes webpack-dev-server and runs on a separate port from prod.server.js and proxies all request to /api/* path to the production server. I separeted this two so that when I finally push my application to production I never have to edit the server.

Here are my two servers:
Production Server (prod.server.js)

const express = require("express");
const api = require('./server/routes/api')
const http = require('./server/routes/http')

const app = express();
app.use(express.static(process.cwd() + '/public'));
api(app, __dirname + "/public");
http(app, __dirname + "/public");


app.get('/*', (req, res) => {
    res.sendFile(__dirname + "/index.html")
});

app.listen(process.env.NODE_ENV || 8001, function () {
    console.log("Application started on port", process.env.NODE_ENV || 8001);
});

Development Server (dev.server.js)

var WebpackDevServer = require('webpack-dev-server');
const api = require('./server/routes/api')
const http = require('./server/routes/http')
var webpack = require('webpack');
var config = require('./webpack.config');
var path = require('path');

var compiler = webpack(config);

var server = new WebpackDevServer(compiler, {
    proxy: {
        '/api': {
            target: 'http://localhost:8001',
            secure: false
          }
    },
     historyApiFallback: true,
    hot: true,
    filename: 'bundle.js',
    publicPath: '/',
    stats: {
        colors: true,
    },
});

server.listen(8000, function () {
    console.log("Application Dev running at port 8000");
});

I expect that when I update my react up the browser should pick up the changes and reload accordingly, but that does not happen. I have to reload, and I have been doing this for a while but I am now frusrated, I would prefer to have the hot reload, any help?

Below is my webpack config if needed.

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: [
        __dirname + "/client/index.js"
    ],
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { 
                test: /\.js$/, 
                loader: ['babel'], 
                query: 
                { 
                    presets: 
                    [
                        'es2015', 
                        'react'
                    ] 
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                loaders: ['style', 'css'],
                exclude: /node_modules/
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: __dirname + '/client/index.html'
        })
    ]
}

biofractal biofractal · Accepted Answer · 2016-11-01T08:31:13

You should add the HotModuleReplacementPlugin() package to your list of plugins, like so:

plugins:[
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
        template: __dirname + '/client/index.html'
    })
]

My hot reloading works fine for me so just in case there is something else I have missed, here is a copy of my webpack.config for you to examine:

Full webpack.config

const path = require('path')
const merge = require('webpack-merge')
const webpack = require('webpack')
const NpmInstallPlugin = require('npm-install-webpack-plugin')
const OpenBrowserPlugin = require('open-browser-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const TARGET = process.env.npm_lifecycle_event
process.env.BABEL_ENV = TARGET
process.env.PORT = 3001
process.env.HOST = 'localhost'

const PATHS = {
  app: path.join(__dirname, 'src'),
  react: path.resolve('./node_modules/react')
}

const common = {
  entry: {
    app: PATHS.app
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {react: PATHS.react}
  },
  module: {
    loaders: [
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'eslint',
        include: PATHS.app
      },
      {
        test: /\.css$/,
        loaders: ['style', 'css'],
        include: PATHS.app
      },
      {
        test: /\.jsx?$/,
        loaders: ['babel'],
        include: PATHS.app
      }
    ]
  }
}

if (TARGET === 'start' || !TARGET) {
  const config = merge(common, {
    devServer: {
      historyApiFallback: true,
      hot: true,
      inline: true,
      progress: true,
      stats: 'errors-only',
      host: process.env.HOST,
      port: process.env.PORT
    },
    plugins: [
      new webpack.SourceMapDevToolPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new OpenBrowserPlugin({
        url: `http://${process.env.HOST}:${process.env.PORT}/`
      }),
      new NpmInstallPlugin({
        save: true
      }),
      new HtmlWebpackPlugin({
        template: PATHS.app + '/index.html',
        inject: 'body'
      })
    ]
  })
  module.exports = config
}

if (TARGET === 'build') {
  module.exports = merge(common, {})
}

ReactJS: Hot Reload Not working

1 Answers