3r-boilerplate

React + Redux + Router = 3R

Modern, universal and simple web application boilerplate built using cutting-edge technologies.

Modern

Best technologies mixed in the right proportions to focus on what you want to do, not how:

Component	Description
React	UI library brought so many new trends into web development.
Redux + DevTools	Predictable state container, powerful and simple. DevTools supported as Chrome extension.
React Router	Routing that keeps your UI in sync with the URL.
Babel	The compiler for writing next generation JavaScript.
Webpack 3	Remarkable module bundler.
LESS	CSS pre-processor of choice. Replace with Sass / Stylus / PostCSS, etc, if needed.
Semantic UI	UI component framework based around useful principles from natural language. Replace with Bootstrap / Foundation / Pure, etc, if needed.
Local CSS	Scope CSS to specific elements using auto-generated unique identifiers for class names.
Autoprefixer	Auto-generate vendor prefixes for CSS rules.
React Hot Loader	Tweak React components in real time.
React Helmet	A document head manager for React.
Express	Fast, unopinionated, minimalist web framework for node.
Node.js	JavaScript runtime. An ecosystem for most parts of the app.

Universal

Same code runs on server (Node.js) and on client (browser) and used to define application logic and render pages.

Main benefits of being universal is availability to search engines, browsers without (or disabled) JavaScript and improved visual experience on first render.

• Switch universality using single flag in configuration (enabled by default).
• If enabled, HTML5 Browser History API is used to manage URL.
• If disabled, app will be served as a static website and fallback to location.hash to manage URL.
• For development universal and static versions are served by the same server component. It reduces code complexity and efforts to test it.

Simple

Boilerplate include minimum configuration and components to get you started quickly and add more stuff later, if needed.

• Four build configurations managed in single file WebpackConfigurator.js
  • server:development
  • server:production
  • client:development
  • client:production
    
    
• Two entry points
  • server.jsx
  • client.jsx
    
    
• Core components
  • Actions: Redux action definitions.
  • History: Exports current browser history manager.
  • Routes: Application routes definition.
  • Store: Redux store configurator.
    
    
• Reducers
  
  
• UI components
  • App: main application container. Hosts other containers.
  • Home: "index" container for application.
  • NotFound: container to show "Page Not Found" message to user.
  • ContentPage: optional container to render header and sticky footer.
  • PageHeader, PageFooter: app's common page header and sticky footer. Do not add directly. Instead, use ContentPage container as a host.

Overview

Webpack is used as a bundler for both server and client entries.

Server Bundle

Generating server bundle with Webpack handles require calls to modules, supported only through Webpack loaders (like CSS or images, for example), extracting and removing them from resulting module. In theory that also means you should rebuild server every time you make (server-related) changes. In practice you won't do it often: most of the changes are client-related and propagated using hot updates without page reload.

If page is reloaded, server response may differ from what's rendered on client and you'll get warning from React similar to this:

Warning: React attempted to reuse markup in a container but the checksum
    was invalid. This generally means that you are using server rendering
    and the markup generated on the server was not what the client was
    expecting. React injected new markup to compensate which works but you
    have lost many of the benefits of server rendering. Instead, figure out
    why the markup being generated is different on the client or server: ...

You can ignore this message as long as you know that markup differs because of outdated server.

Client Bundle

For development client bundle is generated on-the-fly using Webpack's middleware for Express. It provides HMR support as well.

For production static bundle is generated and saved into build folder.

Usage

Quick start

yarn
yarn start

or

npm i
npm start

Then browse to http://localhost:3000/

npm scripts

Lint
npm run lint	Lint project with help of eslint.
Clean
npm run clean	Remove temporary build folders.
npm run clean:server	Remove temporary build folders for server.
npm run clean:client	Remove temporary build folders for client.
Build
npm run build:dev	Build development bundle.
npm run build:server-prod	Build server production bundle.
npm run build:client-prod	Build client production bundle.
npm run build:prod	Build server and client production bundles.
Build & Run
npm run dev	Build and run development version of server and client.
npm run prod	Build and run production version of server and client.
npm start	Synonym for npm run dev.