getting mobx working with hot reloading

.babelrc

@@ -7,6 +7,7 @@
         "react"
       ],
       "plugins": [
+        "transform-decorators-legacy",
         "react-hot-loader/babel",
         "transform-regenerator"
       ]
@@ -18,6 +19,7 @@
         "react"
       ],
       "plugins": [
+        "transform-decorators-legacy",
         "react-hot-loader/babel"
       ]
     },
@@ -26,6 +28,9 @@
       "presets": [
         "es2015-webpack",
         "react"
+      ],
+      "plugins": [
+        "transform-decorators-legacy"
       ]
     }
   }

package.json

@@ -5,9 +5,9 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node ./server/babel-server.js",
+    "start": "node ./src/server/babel-server.js",
     "build": "cross-env BABEL_ENV=client-build webpack --config webpack.config.client.js --env.prod",
-    "dev": "cross-env NODE_ENV=development nodemon ./server/babel-server.js"
+    "dev": "cross-env NODE_ENV=development nodemon ./src/server/babel-server.js"
   },
   "author": "Paul Myburgh",
   "license": "ISC",
@@ -24,17 +24,21 @@
     "koa-router": "^7.0.1",
     "koa-static": "^3.0.0",
     "mobx": "^2.4.1",
+    "mobx-react": "^3.5.3",
     "react": "^15.3.0",
     "react-dom": "^15.3.0"
   },
   "devDependencies": {
     "babel-cli": "^6.11.4",
     "babel-loader": "^6.2.4",
+    "babel-plugin-transform-decorators": "^6.8.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-regenerator": "^6.11.4",
     "babel-polyfill": "^6.9.1",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-es2015-webpack": "^6.4.2",
     "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-0": "^6.5.0",
     "babel-preset-stage-3": "^6.11.0",
     "cross-env": "^2.0.0",
     "json-loader": "^0.5.4",

client/react/Counter.js → src/client/react/Counter.js

@@ -1,6 +1,9 @@
 import React, { Component } from 'react';
+import { observer } from 'mobx-react';
 
+@observer
 export default class Counter extends Component {
+
   constructor(props) {
     super(props);
     this.state = { counter: 0 };

client/entry.js → src/crossover/entry.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
-import App from './React/App';
+import App from '../client/react/App';
 
 /*
  +*  This function is important for the crossover between server and client (isomorphic / universal).
@@ -30,7 +30,7 @@ if (typeof document !== 'undefined') {
   // This is required for React hot reloading, will be
   // turned off automatically for production
   if (module.hot) {
-    module.hot.accept('./React/App', () => {
+    module.hot.accept('../client/react/App', () => {
       ReactDOM.render(
         baseReact(),
         rootEl

src/crossover/mobx/stores/counterStore.js

@@ -0,0 +1,26 @@
+import { observable, action } from 'mobx';
+
+const initialState = {
+	counterValue: 0,
+};
+
+export default class CounterStore {
+
+	@observable counterValue = 0;
+
+	constructor(counter) {
+		Object.assign(this, counter);
+		// this.counterValue = initialState && initialState.appStore && initialState.appStore.counterValue ? initialState.appStore.counterValue : 0;
+	}
+
+	@action
+	increaseCount() {
+		this.counterValue++;
+	}
+
+	toJson() {
+		return {
+			counterValue: this.counterValue,
+		};
+	}
+}

server/middleware/basicMiddleware.js → src/server/middleware/basicMiddleware.js

@@ -6,7 +6,7 @@ import logger from 'koa-logger';
 
 import webpack from 'webpack';
 import { devMiddleware, hotMiddleware } from 'koa-webpack-middleware';
-import devConfig from '../../webpack.config.client';
+import devConfig from '../../../webpack.config.client';
 
 export function baseErrorHandling() {
 	return async (ctx, next) => {

server/middleware/crossoverMiddleware.js → src/server/middleware/crossoverMiddleware.js

@@ -1,6 +1,6 @@
 import { renderToString } from 'react-dom/server';
 
-import { baseReact } from '../../client/entry';
+import { baseReact } from '../../crossover/entry';
 
 export function renderReact() {
 	return async (ctx) => {

server/server.js → src/server/server.js

@@ -20,7 +20,7 @@ const prod = process.env.NODE_ENV !== 'development';
 
 const app = new Koa();
 
-const pug = new Pug({ viewPath: './server/views' });
+const pug = new Pug({ viewPath: './src/server/views' });
 pug.use(app);
 
 app.use(serverLogging());

webpack.config.client.js

@@ -6,10 +6,10 @@ module.exports = (env) => {
 
   return ({
     entry: !env.prod ? (
-      ['react-hot-loader/patch', 'webpack-hot-middleware/client', './client/entry.js']
+      ['react-hot-loader/patch', 'webpack-hot-middleware/client', './src/crossover/entry.js']
     ) : (
       {
-        js: './client/entry.js',
+        js: './src/crossover/entry.js',
         vendor: ['react', 'react-dom'],
       }
     ),