a simple-ish boilerplate for
Simple and Clear
- As few dependencies as possible, with a clear purpose for each.
- Code is readable and understandable and achieves only what is outlined here in the goals, nothing more.
- Simple Flux implementation inspired by (and probably pretty interchangeable with) Redux.
- Top level
Storeobject with as many child stores as necessary.
- Simple cache for
- Only actions should update the stores.
- Components interact with
storevia an API similar to (read: directly inspired by) react-redux:
- App renders content on the server before client takes over.
- A single file defines routes for both server and client.
- Components express their data dependencies.
- CSS Modules provide modular (component-scoped classes) and reusable (composable) CSS that brings order to the global scope and explicitly ties CSS into the component hierarchy while still just being simple CSS files.
- Preprocessors, etc. can be added easily as desired.
Development flow and Build Process
- All JS uses ES6 syntax via Babel.
- Webpack provides module bundling.
- Code splitting can be implemented on the router level.
- Dev Mode: Re-compile bundle(s) and re-start server on any change.
- Hot Module Replacement Mode: Optional hot reloading for React components and CSS modules.
- Functional stores (reducers, like redux).
- Store- or component-specific re-renders (a re-render is triggered on the entire component tree on any store update).
- UI tests
requires node v4! make sure your environment is up to date
npm run build
Compiles both the client and server rendering bundle in production mode with webpack. CSS is extracted into a separate static file (main.css), which is added to the index.pug template on the web server.
ExtractTextPlugin is not run in
allChunks mode by default, so CSS required by routes that are split out into separate chunks will not be extracted. That CSS is added on the client in a
<style> tag, which might create a FOUC and be undesirable. Webpack is very flexible with how it handles stylesheets and a specific strategy should be implemented based on the requirements of the particular site.
npm run start
Starts the web server in production mode.
npm run build:dev
Compiles assets for development with webpack in watch mode, re-compiling on any file change.
CSS is loaded on the client via
<style> tags (using
npm run start:dev
Starts the web server via nodemon to re-start on any change (such as when webpack re-compiles the server-render bundle).
Hot Module Replacement
Note: This runs "vanilla webpack HMR" since most state is in the Flux store, as recommended here
npm run build:hot
build:dev script with HMR flag so it only compiles the server-render bundle (since the client bundle is handled by the webpack-dev-server).
npm run start:hot
start:dev script with HMR flag which tells the server to retrieve the client scripts from the webpack-dev-server.
npm run hot
Compiles the client bundle with hot module replacement and serves it on port 8080 via webpack-dev-server.
- express for the web server.
- react for component rendering.
- react-router for universal routing.
- webpack to preprocess and bundle css and js and implement code splitting.
- babel to allow for ES2015 syntax.
- css processing
- autoprefixer to add browser prefixes to CSS as needed.
- css-loader to provide CSS modules functionality via webpack.
- extract-text-webpack-plugin to compile all CSS into a separate file in production.
- null-loader to ignore global CSS in the server render bundle.
- postcss-loader to postprocess CSS in webpack.
- postcss-import to inline @import calls in CSS.
- style-loader to add style tags for CSS on demand in the browser.
- pug for node templates.
- lodash for utility functions.
- react-addons-update to implement immutable updates in the
- serve-favicon to serve the favicon.ico.
- source-map-support for source map support in node.
- superagent for client and node AJAX.
- redial to express component data dependencies.
- body-parser for server request body parsing (only necessary in the mock-api file).
- hot module replacement
- webpack-dev-server to set up hot module replacement of client assets.
- Handcrafting an isomorphic redux application with love
- Backend Apps with Webpack
- The ultimate Webpack setup
- Welcome to Future of Web Application Delivery
- Hot Reloading in React
Add Testing framework (Jest) and some unit test examples.
- Add a way to define blocking actions on routes. i.e. actions that must complete before the route component is rendered.
- Add a way to define error handling for route dependencies. In general, this would be for client-side 404-type situations so that a 404 page can be shown without a flicker.