React Demo

demo

---

About

This is a starter boilerplate app I've put together using the following technologies:

• Isomorphic Universal rendering
• Both client and server make calls to load data from separate API server
• React
• React Router
• Express
• Babel for ES6 and ES7 magic
• Webpack for bundling
• Webpack Dev Middleware
• Webpack Hot Middleware
• Redux's futuristic Flux implementation
• Redux Dev Tools for next generation DX (developer experience). Watch Dan Abramov's talk.
• React Router Redux Redux/React Router bindings.
• ESLint to maintain a consistent code style
• redux-form to manage form state in Redux
• lru-memoize to speed up form validation
• multireducer to combine single reducers into one key-based reducer
• style-loader, sass-loader and less-loader to allow import of stylesheets in plain css, sass and less,
• react-helmet to manage title and meta tag information on both server and client
• webpack-isomorphic-tools to allow require() work for statics both on client and server
• mocha to allow writing unit tests for the project.
• ant design for base component and layout
• graphql used by fetch api

I cobbled this together from a wide variety of similar "starter" repositories. As I post this in June 2015, all of these libraries are right at the bleeding edge of web development. They may fall out of fashion as quickly as they have come into it, but I personally believe that this stack is the future of web development and will survive for several years. I'm building my new projects like this, and I recommend that you do, too.

Installation

npm install

build(init, run once, just for copying antd.css to dist)

npm run build

Running Dev Server

npm run dev

The first time it may take a little while to generate the first webpack-assets.json and complain with a few dozen [webpack-isomorphic-tools] (waiting for the first Webpack build to finish) printouts, but be patient. Give it 30 seconds.

Using Redux DevTools

Redux Devtools are enabled by default in development.

• CTRL+H Toggle DevTools Dock
• CTRL+Q Move DevTools Dock Position
• see redux-devtools-dock-monitor for more detailed information.

If you have the Redux DevTools chrome extension installed it will automatically be used on the client-side instead.

If you want to disable the dev tools during development, set __DEVTOOLS__ to false in /webpack/dev.config.js.
DevTools are not enabled during production.

Building and Running Production Server

npm run build
npm run start