react-hotplate is a boilerplate for React + Webpack + Express with hot reloading.
It provides both a development mode (npm run dev) and production mode (npm run build && npm start).
It was originally based on gaearon/react-hot-boilerplate and has been updated using gaearon/react-transform-boilerplate.
npm install
npm run dev
open http://localhost:3200
Now edit src/App.js.
Your changes will appear without reloading the browser like in this video.
npm run build
This will eslint and build JavaScript bundles in ./dist/.
This webpack config is designed to name the files based on a hash. A filename map is generated in
./dist/webpack-assets.json and can be used to generate the appropriate html links.
Start the production server with:
npm start
- webpack - efficiently builds common js modules as a browser-compatible js bundle
- webpack-dev-middleware - runs webpack as middleware
- webpack-hot-middleware - allows hot swapping node modules without a page refresh
- react-transform-webpack-hmr - hot swapping react components without a page refresh
- react-transform-catch-errors - catch exceptions in component renders
- babel - transpiles ES6/JSX as ES5
- babel-runtime - used to export babel helper code to the vendor file
- babel-eslint - lints ES6 code
- eslint-plugin-react - lints React/JSX code
- node-dev - automatically restarts node server when any required files change
The meat of the hotplate code is in server.js and webpack.config.js. Both files look at the NODE_ENV environment
variable to determine if it should run in development or production mode.
The files for the app are in src/.
The original code this was based on was released under the MIT license. My changes are released under public domain.