Coder Coded React Boilerplate

---

A web app boilerplate with following technologies:

• Babel for ES6 syntax
• Webpack for JS bundles
• React for view components
• Redux for state handling
• PostCSS for styles
• pino for logging
• Express for dev app
• Nunjucks for server-side rendering

Stripped down version of crcd-fullstack for client-side apps (which is now deprecated, we swapped riot with react).

Supported browsers

Browser support can be adjusted in .babelrc using babel-preset-env. Default configuration:

last 2 versions, ie >= 10

Installation

npm install

Running Dev Server

npm run dev

Builds static views in dev mode and then starts a development server and a webpack server which handles the hot reload. Defaults to port 3000 (with webpack in 3001).

Note The dev server only works on a modern browser.

Building and Running Production Server

npm run build
npm run start

Does the same as dev build but instead of the webpack dev server, it creates a webpack bundle. Static views are built in production mode and the express server is started. Defaults to port 8080.

NOTE: Build throws an error during first run since the build dir is missing. Shall be fixed.

Serving with nginx or other http server

Just copy and serve build/static/ and the client-side application is included in index.html.

Folder structure

• src/ : Source for server (built using Babel)
  • config/ : YAML or JSON configs for the web-server
  • static/ : Static files and webpack build output
  • static-views/ : Nunjucks templates to be rendered as static html files into static/
  • client/ : Source for client (built using Webpack)
    • components/ : Re-usable React components
    • modules/ : Application modules, usually containing a React container and its components plus redux related files
    • redux/ : Configuration for redux store and additional middleware
    • styles/ : Shared styles etc.
    • utils/ : Helpers etc.
• build/ : Build output
  • static/dist : Webpack output
• .tmp/ : Temp builds in dev mode

Attributions

This boilerplate was originally based on React Redux Universal Hot Example. Thanks to erikras and contributors for the awesome example.

Also, Jack Hsu introduced a clever way of structuring a React app.