A minimal boilerplate setup for React, React Hot Loader, Webpack 2 and Express.
npm install
npm start
open http://localhost:3000
Now edit src/App.js.
Your changes will appear without reloading the browser like in this video.
This boilerplate project includes React-friendly ESLint configuration.
npm run lint
A basic production script is included that builds your app to a dist folder
npm run build
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.
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.
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.
- React
- Webpack
- webpack-dev-server
- babel-loader
- react-hot-loader