Provides a base to start coding from when creating a React ES6 application that requires server side rendering.
- Webpack with a clean separation of production and development builds and standard optimizations for production.
- Babel set up to compile ES6+ and React to ES5.
- Hot loading on the client side (set up for React Components).
- Hot loading on the server side (set up for all code running under the Express handler).
- Easy deployment (after running npm install and npm prune the code is ready to be synced to a production environment e.g. to Heroku).
npm install.npm startto start in development server orNODE_ENV=production npm startto start the production server.
The Webpack configuration is set up to build both development and production versions of the code.
Further configuration should be added to the correct file in the
config/webpack folder according to whether the new configuration is required in development,
production, or both.
Building production code: npm run compile.
Buidling development code: there is no need to explicitly compile the development code because it is compiled by the Express middleware when the server starts.
Babel is configured with the following presets: es2015, react and stage-0.
The top level React component is configured to reload along with children when there are any changes to the nested components.
All of the server side code reloads when any changes are made, without restarting the server, hence the state of the previously compiled modules, held in memory, is retained. This can easily be extended to any components with state that exist on the server (if any do - a stateless server side may be best).
After making sure that you are logged in (heroku login) and that you have a Heroku application
corresponding to the current application (heroku create):
heroku plugins:install heroku-builds- install the plugin that allows deploying directly from the current directory.npm deploy- make sure that the code is built and push it to Heroku.