React Hot Loader 3.0 beta demo

.babelrc

@@ -1,3 +1,10 @@
 {
-  "presets": ["es2015", "stage-0", "react"]
+  "presets": [
+    ["es2015", {"modules": false}],
+    "stage-2",
+    "react"
+  ],
+  "plugins": [
+    "react-hot-loader/babel"
+  ]
 }

.gitignore

@@ -2,3 +2,4 @@ node_modules
 npm-debug.log
 .DS_Store
 dist
+*.swp

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014 Dan Abramov
+Copyright (c) 2017 Dan Abramov
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -3,32 +3,46 @@ react-hot-boilerplate
 
 The minimal dev environment to enable live-editing React components.
 
+Based on the guide available at https://webpack.js.org/guides/hot-module-replacement/
+
 ### Usage
 
 ```
-npm install
-npm start
+yarn
+yarn start
 open http://localhost:3000
 ```
 
-Now edit `src/App.js`.  
+Now edit [`src/App.js`](./src/App.js).
 Your changes will appear without reloading the browser like in [this video](http://vimeo.com/100010922).
 
 ### Linting
 
 This boilerplate project includes React-friendly ESLint configuration.
 
 ```
-npm run lint
+yarn run lint
+```
+
+### Building
+
+A basic production script is included that builds your app to a `dist` folder
+
+```
+yarn run build
 ```
 
 ### Using `0.0.0.0` as Host
 
-You may want to change the host in `server.js` and `webpack.config.js` from `localhost` to `0.0.0.0` to allow access from same WiFi network. This is not enabled by default because it is reported to cause problems on Windows. This may also be useful if you're using a VM.
+You may want to change the host in `webpack.config.js` from `localhost` to `0.0.0.0` to allow access from same WiFi network. This is not enabled by default because it is reported to cause problems on Windows. This may also be useful if you're using a VM.
 
 ### Missing Features
 
-This boilerplate is purposefully simple to show the minimal configuration for React Hot Loader. For a real project, you'll want to add a separate config for production with hot reloading disabled and minification enabled. You'll also want to add a router, styles and maybe combine dev server with an existing server. This is out of scope of this boilerplate, but you may want to look into [other starter kits](https://github.com/gaearon/react-hot-loader/blob/master/docs/README.md#starter-kits).
+This boilerplate is purposefully simple to show the minimal configuration for React Hot Loader. For a real project, you may want to add a router, styles and maybe combine dev server with an existing server. This is out of scope of this boilerplate, but you may want to look into [other starter kits](https://github.com/gaearon/react-hot-loader/blob/master/docs/README.md#starter-kits).
+
+### WebStorm
+
+Because the WebStorm IDE uses "safe writes" by default, Webpack's file-watcher won't recognize file changes, so hot-loading won't work. To fix this, disable "safe write" in WebStorm.
 
 ### Dependencies
 

package.json

@@ -3,8 +3,11 @@
   "version": "1.0.0",
   "description": "Boilerplate for ReactJS project with hot code reloading",
   "scripts": {
-    "start": "node server.js",
-    "lint": "eslint src"
+    "start": "webpack-dev-server",
+    "lint": "eslint src",
+    "prebuild": "rimraf dist",
+    "build": "cross-env NODE_ENV=production webpack -p --config webpack.config.production.js",
+    "postbuild": "copyfiles index.html dist"
   },
   "repository": {
     "type": "git",
@@ -28,20 +31,23 @@
   },
   "homepage": "https://github.com/gaearon/react-hot-boilerplate",
   "devDependencies": {
-    "babel-core": "^6.0.20",
-    "babel-eslint": "^4.1.3",
-    "babel-loader": "^6.0.1",
-    "babel-preset-es2015": "^6.0.15",
-    "babel-preset-react": "^6.0.15",
-    "babel-preset-stage-0": "^6.0.15",
-    "eslint": "^1.10.3",
-    "eslint-plugin-react": "^3.6.2",
-    "react-hot-loader": "^1.3.0",
-    "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.12.1"
+    "babel-core": "^6.22.1",
+    "babel-loader": "^6.2.10",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-react": "^6.22.0",
+    "babel-preset-stage-2": "^6.22.0",
+    "copyfiles": "^1.2.0",
+    "cross-env": "^3.1.4",
+    "react-hot-loader": "^3.0.0-beta.6",
+    "rimraf": "^2.6.0",
+    "webpack": "^2.2.0",
+    "webpack-dev-server": "^2.2.0"
   },
   "dependencies": {
-    "react": "^0.14.6",
-    "react-dom": "^0.14.6"
+    "babel-eslint": "^7.1.1",
+    "eslint": "^3.14.1",
+    "eslint-plugin-react": "^6.9.0",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2"
   }
 }

src/App.js

@@ -1,9 +1,19 @@
 import React, { Component } from 'react';
+import Layout from './Layout';
+import Counter from './Counter';
 
+// If you use React Router, make this component
+// render <Router> with your routes. Currently,
+// only synchronous routes are hot reloaded, and
+// you will see a warning from <Router> on every reload.
+// You can ignore this warning. For details, see:
+// https://github.com/reactjs/react-router/issues/2182
 export default class App extends Component {
   render() {
     return (
-      <h1>Hello, world.</h1>
+      <Layout>
+        <Counter />
+      </Layout>
     );
   }
 }

src/Counter.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+
+export default class Counter extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { counter: 0 };
+  }
+
+  componentDidMount() {
+    this.interval = setInterval(this.tick.bind(this), 1000);
+  }
+
+  tick() {
+    this.setState({ counter: this.state.counter + 1 });
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  render() {
+    return <h2>Counter: {this.state.counter}</h2>;
+  }
+}

src/Layout.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function Layout({ children }) {
+  return (
+    <div>
+      <h1>Hello, world!</h1>
+      {children}
+    </div>
+  );
+}

src/index.js

@@ -1,5 +1,16 @@
+import { AppContainer } from 'react-hot-loader';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const rootEl = document.getElementById('root');
+const render = Component =>
+  ReactDOM.render(
+    <AppContainer>
+      <Component />
+    </AppContainer>,
+    rootEl
+  );
+
+render(App);
+if (module.hot) module.hot.accept('./App', () => render(App));

webpack.config.js

@@ -2,25 +2,65 @@ var path = require('path');
 var webpack = require('webpack');
 
 module.exports = {
-  devtool: 'eval',
   entry: [
+    'react-hot-loader/patch',
+    // activate HMR for React
+
     'webpack-dev-server/client?http://localhost:3000',
+    // bundle the client for webpack-dev-server
+    // and connect to the provided endpoint
+
     'webpack/hot/only-dev-server',
-    './src/index'
+    // bundle the client for hot reloading
+    // only- means to only hot reload for successful updates
+
+    './src/index.js',
+    // the entry point of our app
   ],
+
   output: {
-    path: path.join(__dirname, 'dist'),
     filename: 'bundle.js',
+    // the output bundle
+
+    path: path.resolve(__dirname, 'dist'),
+
     publicPath: '/static/'
+    // necessary for HMR to know where to load the hot update chunks
+  },
+
+  devtool: 'inline-source-map',
+
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        use: [
+          'babel-loader',
+        ],
+        exclude: /node_modules/,
+      },
+    ],
   },
+
   plugins: [
-    new webpack.HotModuleReplacementPlugin()
+    new webpack.HotModuleReplacementPlugin(),
+    // enable HMR globally
+
+    new webpack.NamedModulesPlugin(),
+    // prints more readable module names in the browser console on HMR updates
+
+    new webpack.NoEmitOnErrorsPlugin(),
+    // do not emit compiled assets that include errors
   ],
-  module: {
-    loaders: [{
-      test: /\.js$/,
-      loaders: ['react-hot', 'babel'],
-      include: path.join(__dirname, 'src')
-    }]
-  }
+
+  devServer: {
+    host: 'localhost',
+    port: 3000,
+
+    historyApiFallback: true,
+    // respond to 404s with index.html
+
+    hot: true,
+    // enable HMR on the server
+  },
 };

webpack.config.production.js

@@ -0,0 +1,33 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+  entry: './src/index.js',
+
+  output: {
+    filename: 'static/bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: '/'
+  },
+
+  devtool: 'source-map',
+
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        use: [
+          'babel-loader'
+        ],
+        exclude: /node_modules/
+      }
+    ]
+  },
+
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      sourceMap: true,
+      comments: false
+    })
+  ]
+};