Modernize counter example setup

Author: mxstbr

examples/counter/.babelrc

@@ -1,8 +1,4 @@
 {
-  "presets": ["es2015", "react"],
-  "env": {
-    "development": {
-      "presets": ["react-hmre"]
-    }
-  }
+  "presets": ["es2015-webpack", "react"],
+  "plugins": ["transform-object-rest-spread"]
 }

examples/counter/index.html

@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "description": "Redux counter example",
   "scripts": {
-    "start": "node server.js",
+    "start": "node server.dev.js",
+    "build": "webpack --config webpack.config.prod.js",
     "test": "cross-env NODE_ENV=test mocha --recursive --compilers js:babel-register",
     "test:watch": "npm test -- --watch"
   },
@@ -25,19 +26,20 @@
   "devDependencies": {
     "babel-core": "^6.3.15",
     "babel-loader": "^6.2.0",
-    "babel-preset-es2015": "^6.3.13",
+    "babel-plugin-transform-object-rest-spread": "^6.8.0",
+    "babel-preset-es2015-webpack": "^6.4.1",
     "babel-preset-react": "^6.3.13",
-    "babel-preset-react-hmre": "^1.1.1",
     "babel-register": "^6.3.13",
     "cross-env": "^1.0.7",
     "enzyme": "^2.0.0",
     "expect": "^1.6.0",
     "express": "^4.13.3",
+    "html-webpack-plugin": "^2.21.0",
     "mocha": "^2.2.5",
     "node-libs-browser": "^0.5.2",
     "react-addons-test-utils": "^0.14.7",
-    "webpack": "^1.9.11",
-    "webpack-dev-middleware": "^1.2.0",
-    "webpack-hot-middleware": "^2.9.1"
+    "webpack": "^2.1.0-beta.13",
+    "webpack-dev-middleware": "^1.6.1",
+    "webpack-hot-middleware": "^2.10.0"
   }
 }

examples/counter/package.json

@@ -0,0 +1,23 @@
+const webpack = require('webpack')
+const express = require('express')
+const webpackDevMiddleware = require('webpack-dev-middleware')
+const webpackHotMiddleware = require('webpack-hot-middleware')
+const config = require('./webpack.config.dev')
+
+const app = express()
+const port = 3000
+const compiler = webpack(config)
+
+app.use(webpackDevMiddleware(compiler, {
+  noInfo: true,
+  publicPath: config.output.publicPath
+}))
+app.use(webpackHotMiddleware(compiler))
+
+app.listen(port, (error) => {
+  if (error) {
+    console.error(error)
+  } else {
+    console.info('🌎  Open http://localhost:%s/ in a web browser', port)
+  }
+})

examples/counter/server.dev.js

@@ -4,8 +4,10 @@ import { createStore } from 'redux'
 import Counter from './components/Counter'
 import counter from './reducers'
 
+const rootEl = document.createElement('div')
+document.body.appendChild(rootEl)
+
 const store = createStore(counter)
-const rootEl = document.getElementById('root')
 
 function render() {
   ReactDOM.render(
@@ -14,7 +16,7 @@ function render() {
       onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
       onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
     />,
-    rootEl  
+    rootEl
   )
 }