Hot reload in Electron/React application

Question

Hot reloading seems to no longer be working. I am not sure what could of changed in my setup, in fact as far as I can tell, and git logs show, nothing was changed.

Regardless, Im trying to get reloading of CSS and Reacts .jsx files working.

Currently, I run npm run watch followed by npm run start in another console tab. The application starts, but any changes in files are not reloaded. My package.json looks like the following:

{
  ...
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env ENVIRONMENT=DEV electron main.js",
    "watch": "webpack-dev-server --hot --inline",
    "build": "webpack"
  },
  "dependencies": {
    "axios": "^0.15.2",
    "babel": "^6.5.2",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-class-properties": "^6.19.0",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.2.0",
    "cross-env": "^3.1.1",
    "electron": "^1.3.4",
    "electron-prebuilt": "^1.4.2",
    "json-loader": "^0.5.4",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-router": "^2.8.1",
    "react-tap-event-plugin": "^1.0.0",
    "semantic-ui-react": "^0.56.13",
    "socket.io-client": "^1.5.0",
    "store": "^1.3.20",
    "webpack": "^1.13.3"
  },
  "devDependencies": {
    "css-loader": "^0.25.0",
    "style-loader": "^0.13.1",
    "webpack-dev-server": "^1.16.2"
  }
}

Some unnecessary dependencies are omitted. My webpack.config.js looks like the following:

var path = require("path");

module.exports = {
  entry: path.resolve(__dirname, "app/index.jsx"),
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: 'http://localhost:8080/build/',
    filename: 'app.js'
  },
  module: {
    loaders: [
        {
            test: /\.jsx?$/,
            loader: 'babel',
            exclude: /node_modules/
        },
        { 
            test: /\.css$/,
            loader: "style-loader!css-loader"
        },
        { 
            test: /\.json$/, 
            loader: "json-loader"
        }
    ]
  }    
};

What am I missing to get hot reload working in this setup?

EDIT: So as you can see, the entry point is defined as index.jsx. This file is very simple, and looks like the following:

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './styles.css'
import routes from './router.jsx'

ReactDOM.render(
  routes,
  document.getElementById('app')
);

Whenever I make a change to this file, the hot reload is triggered. In addition, changes to files that are imported here (like styles.css) are also reloaded. The issue is, all of my components are obviously imported in my router. Any changes to my components therefore are not hot reloaded. How can I get this working properly?

Answer 1

I use into webpack.config.js this options:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  name: 'client',
  entry: './client.js',
  output: {
    path: __dirname, filename: 'bundle.js'
  },
  module: {
    loaders: [
      { 
        test: /\.jsx?$/,         // Match both .js and .jsx files
        exclude: /node_modules/, 
        loader: "babel-loader", 
        query:
        {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  devServer: {
    historyApiFallback: true
  },
}

And into package.json this option:

  "scripts": {
    "start": "npm run dev",
    "webpack": "webpack --progress --colors",
    "dev": "webpack-dev-server --devtool eval --progress --colors --inline"
  },