Enabled HMR

package.json

@@ -4,7 +4,7 @@
   "description": "Netlify CMS lets content editors work on structured content stored in git",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server -d --inline --config webpack.config.js",
+    "start": "webpack-dev-server --config webpack.config.js",
     "test": "NODE_ENV=test mocha --recursive --compilers js:babel-register --require ./test/setup.js",
     "test:watch": "npm test -- --watch",
     "build": "webpack --config webpack.config.js",
@@ -37,7 +37,6 @@
     "eslint-plugin-react": "^5.1.1",
     "exports-loader": "^0.6.3",
     "extract-text-webpack-plugin": "^1.0.1",
-    "express": "^4.13.4",
     "file-loader": "^0.8.5",
     "immutable": "^3.7.6",
     "imports-loader": "^0.6.5",
@@ -50,6 +49,7 @@
     "postcss-loader": "^0.9.1",
     "react": "^15.1.0",
     "react-dom": "^15.1.0",
+    "react-hot-loader": "^3.0.0-beta.2",
     "react-immutable-proptypes": "^1.6.0",
     "react-lazy-load": "^3.0.3",
     "react-pure-render": "^1.0.2",
@@ -60,8 +60,8 @@
     "redux-thunk": "^1.0.3",
     "style-loader": "^0.13.0",
     "url-loader": "^0.5.7",
-    "webpack": "^1.12.13",
-    "webpack-dev-server": "^1.14.1",
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.15.1",
     "webpack-postcss-tools": "^1.1.1",
     "whatwg-fetch": "^1.0.0"
   },

src/index.js

@@ -1,31 +1,34 @@
 import React from 'react';
 import { render } from 'react-dom';
-import { Provider } from 'react-redux';
-import { Router } from 'react-router';
+import { AppContainer } from 'react-hot-loader'
+import Root from './root'
 import registry from './lib/registry';
-import configureStore from './store/configureStore';
-import routes from './routing/routes';
-import history, { syncHistory } from './routing/history';
 import 'file?name=index.html!../example/index.html';
 import './index.css';
 
-const store = configureStore();
-
-// Create an enhanced history that syncs navigation events with the store
-syncHistory(store);
-
+// Create mount element dynamically
 const el = document.createElement('div');
 el.id = 'root';
 document.body.appendChild(el);
 
 render((
-  <Provider store={store}>
-    <Router history={history}>
-      {routes}
-    </Router>
-  </Provider>
+  <AppContainer>
+    <Root />
+  </AppContainer>
 ), el);
 
+if (module.hot) {
+  module.hot.accept('./root', () => {
+    const NextRoot = require('./root').default;
+    console.log(NextRoot);
+    render((
+      <AppContainer>
+        <NextRoot />
+      </AppContainer>
+    ), el);
+  });
+}
+
 window.CMS = {};
 console.log('reg: ', registry);
 for (const method in registry) {

src/root.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { Router } from 'react-router';
+import routes from './routing/routes';
+import history, { syncHistory } from './routing/history';
+import configureStore from './store/configureStore';
+
+const store = configureStore();
+
+// Create an enhanced history that syncs navigation events with the store
+syncHistory(store);
+
+const Root = () => (
+  <Provider store={store}>
+    <Router history={history}>
+      {routes}
+    </Router>
+  </Provider>
+)
+
+export default Root

webpack.config.js

@@ -3,6 +3,9 @@ var webpack = require('webpack');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var path = require('path');
 
+const HOST = 'localhost';
+const PORT = '8080';
+
 module.exports = {
   module: {
     loaders: [
@@ -22,7 +25,13 @@ module.exports = {
         query: {
           cacheDirectory: true,
           presets: ['react', 'es2015'],
-          plugins: ['transform-class-properties', 'transform-object-assign', 'transform-object-rest-spread', 'lodash']
+          plugins: [
+            'transform-class-properties',
+            'transform-object-assign',
+            'transform-object-rest-spread',
+            'lodash',
+            'react-hot-loader/babel'
+          ]
         }
       }
     ]
@@ -34,6 +43,9 @@ module.exports = {
   ],
 
   plugins: [
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin(),
     new ExtractTextPlugin('cms.css', { allChunks: true }),
     new webpack.ProvidePlugin({
       'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
@@ -42,16 +54,23 @@ module.exports = {
 
   context: path.join(__dirname, 'src'),
   entry: {
-    cms: './index',
+    cms: [
+      'webpack/hot/dev-server',
+      `webpack-dev-server/client?http://${HOST}:${PORT}/`,
+      'react-hot-loader/patch',
+      './index'
+    ],
   },
   output: {
     path: path.join(__dirname, 'dist'),
-    filename: '[name].js'
+    filename: '[name].js',
+    publicPath: `http://${HOST}:${PORT}/`,
   },
-  externals:  [/^vendor\/.+\.js$/],
+  externals: [/^vendor\/.+\.js$/],
   devServer: {
+    hot: true,
     contentBase: 'example/',
     historyApiFallback: true,
-    devTool: 'source-map'
+    devTool: 'cheap-module-source-map'
   },
 };