Hot reloading with webpack

.eslintrc.js

@@ -46,6 +46,6 @@ module.exports = {
         "react/jsx-uses-vars": "error",
 
         // Disable no-console rule in production
-        "no-console": process.env.NODE_ENV !== "production" ? "off" : ["error"]
+        "no-console": process.env.NODE_ENV !== "production" ? "off" : "error"
     }
 };

.gitignore

@@ -1 +1,3 @@
 node_modules
+app/dist/eventsourcePolyfill.js
+app/dist/webpackHotMiddlewareClient.js

app/middleware/api.js

@@ -242,7 +242,7 @@ export default store => next => reduxAction => {
         },
         error => {
             if (failureDispatch) {
-                store.dispatch(failureDispatch(error));
+                store.dispatch(failureDispatch(error.message));
             }
         }
     );

app/reducers/paginate.js

@@ -1,6 +1,6 @@
 import { createReducer } from "../utils";
 
-export const DEFAULT_LIMIT = 1;  /** Default max number of elements to retrieve. */
+export const DEFAULT_LIMIT = 30;  /** Default max number of elements to retrieve. */
 
 const initialState = {
     isFetching: false,

index.all.js

@@ -5,17 +5,46 @@ import "./app/styles/ampache.css";
 
 // Handle app init
 import React from "react";
-import { render } from "react-dom";
+import ReactDOM from "react-dom";
 import { hashHistory } from "react-router";
 import { syncHistoryWithStore } from "react-router-redux";
 
-import Root from "./app/containers/Root";
 import configureStore from "./app/store/configureStore";
 
 const store = configureStore();
 const history = syncHistoryWithStore(hashHistory, store);
 
-render(
+const rootElement = document.getElementById("root");
+
+let render = () => {
+    const Root = require("./app/containers/Root").default;
+    ReactDOM.render(
         <Root store={store} history={history} />,
-    document.getElementById("root")
+        rootElement
-);
+    );
+};
+
+if (module.hot) {
+    // Support hot reloading of components
+    // and display an overlay for runtime errors
+    const renderApp = render;
+    const renderError = (error) => {
+        const RedBox = require("redbox-react");
+        ReactDOM.render(
+            <RedBox error={error} />,
+            rootElement
+        );
+    };
+    render = () => {
+        try {
+            renderApp();
+        } catch (error) {
+            renderError(error);
+        }
+    };
+    module.hot.accept("./app/containers/Root", () => {
+        setTimeout(render);
+    });
+}
+
+render();

index.html

@@ -31,7 +31,7 @@
         </div>
 
         <!-- React views and stuff -->
-        <script src="app/dist/index.js"></script>
+        <script src="./app/dist/index.js"></script>
     </body>
 </html>
 

package.json

@@ -6,6 +6,10 @@
   "license": "MIT",
   "homepage": "https://github.com/Phyks/ampache_react",
   "repository": "git+https://github.com/Phyks/ampache_react.git",
+  "scripts": {
+    "build": "./node_modules/webpack/bin/webpack.js --progress",
+    "serve": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress  --hot"
+  },
   "dependencies": {
     "babel-polyfill": "^6.9.1",
     "babel-preset-es2015": "^6.9.0",
@@ -39,6 +43,7 @@
     "eslint": "^3.1.1",
     "eslint-loader": "^1.4.1",
     "eslint-plugin-react": "^5.2.2",
+    "eventsource-polyfill": "^0.9.6",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
     "postcss": "^5.1.0",
@@ -46,11 +51,14 @@
     "postcss-reporter": "^1.4.1",
     "precss": "^1.4.0",
     "react-a11y": "^0.3.3",
+    "redbox-react": "^1.2.10",
     "redux-logger": "^2.6.1",
     "style-loader": "^0.13.1",
     "stylelint": "^7.0.3",
     "stylelint-config-standard": "^11.0.0",
     "url-loader": "^0.5.7",
-    "webpack": "^1.13.1"
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.14.1",
+    "webpack-hot-middleware": "^2.12.1"
   }
 }

webpack.config.base.js

@@ -18,7 +18,7 @@ module.exports = {
     output: {
         path: path.join(__dirname, "app/dist"),
         filename: "[name].js",
-        publicPath: "./"
+        publicPath: "/app/dist"
     },
 
     module: {

webpack.config.development.js

@@ -3,4 +3,13 @@ var config = require("./webpack.config.base.js");
 
 config.devtool = "cheap-module-eval-source-map";
 
+// necessary for hot reloading with IE:
+config.entry.eventsourcePolyfill = 'eventsource-polyfill';
+// listen to code updates emitted by hot middleware:
+config.entry.webpackHotMiddlewareClient = 'webpack-hot-middleware/client';
+
+config.plugins = config.plugins.concat([
+    new webpack.HotModuleReplacementPlugin()
+]);
+
 module.exports = config;

webpack.config.production.js

@@ -11,6 +11,11 @@ config.devtool = "#source-map";
 
 config.plugins = config.plugins.concat([
     new webpack.NoErrorsPlugin(),
+    new webpack.DefinePlugin({
+        'process.env': {
+            'NODE_ENV': JSON.stringify('production')
+        }
+    }),
     new webpack.optimize.OccurenceOrderPlugin(true),
     new webpack.optimize.DedupePlugin(),
     new webpack.optimize.UglifyJsPlugin({