Modernize async example setup

Author: gaearon

examples/async/.babelrc

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

examples/async/devServer.js

@@ -2,7 +2,8 @@
   "name": "redux-async-example",
   "description": "Redux async example",
   "scripts": {
-    "start": "node devServer.js"
+    "start": "node server.dev.js",
+    "build": "webpack --config webpack.config.prod.js"
   },
   "repository": {
     "type": "git",
@@ -21,17 +22,17 @@
     "redux-thunk": "^1.0.3"
   },
   "devDependencies": {
-    "babel-cli": "^6.10.1",
     "babel-core": "^6.3.15",
     "babel-loader": "^6.2.0",
     "babel-plugin-transform-object-rest-spread": "^6.8.0",
-    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-es2015-webpack": "^6.4.1",
     "babel-preset-react": "^6.3.13",
     "expect": "^1.6.0",
     "express": "^4.13.3",
+    "html-webpack-plugin": "^2.20.0",
     "node-libs-browser": "^0.5.2",
-    "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/async/index.html

@@ -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/async/package.json

@@ -4,9 +4,14 @@ import { render } from 'react-dom'
 import Root from './components/Root'
 import configureStore from './store/configureStore'
 
+const rootEl = document.createElement('div')
+document.body.appendChild(rootEl)
+
 const store = configureStore()
+render(<Root store={store} />, rootEl)
 
-render(
-  <Root store={store} />,
-  document.getElementById('root')
-)
+if (module.hot) {
+  module.hot.accept('./components/Root', () => {
+    render(<Root store={store} />, rootEl)
+  })
+}

examples/async/server.dev.js

@@ -12,8 +12,7 @@ export default function configureStore() {
   if (module.hot) {
     // Enable Webpack hot module replacement for reducers
     module.hot.accept('../reducers', () => {
-      const nextRootReducer = require('../reducers').default
-      store.replaceReducer(nextRootReducer)
+      store.replaceReducer(reducer)
     })
   }
 

examples/async/src/index.js

@@ -0,0 +1,20 @@
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  devtool: 'cheap-module-eval-source-map',
+  entry: ['./src/index', 'webpack-hot-middleware/client'],
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({ title: 'Redux async example' }),
+    new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"' })
+  ],
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      loaders: ['babel'],
+      include: path.join(__dirname, 'src')
+    }]
+  }
+}

examples/async/src/store/configureStore.js

@@ -0,0 +1,25 @@
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: './src/index',
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].[hash].js',
+    publicPath: '/'
+  },
+  plugins: [
+    new HtmlWebpackPlugin({ title: 'Redux async example' }),
+    new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.optimize.UglifyJsPlugin()
+  ],
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      loaders: ['babel'],
+      include: path.join(__dirname, 'src')
+    }]
+  }
+}