cl1ck / react-universal-boilerplate

react-universal-boilerplate

Requirements

• NodeJS ^6.4.0
• RethinkDB ^2.3.4

Features

Environment

[X] pnpm as package manager [x] Webpack 2 as module bundler for client & server [x] Babel for transpiling ES2016 and some proposed ESNext features [x] PM2 for daemonizing in production [x] Typescript

Client side

[x] React [x] React Router for universal routing [x] Redux for managing application state [x] immutable

i18n

[x] ReactIntl for i18n

Styling

[x] PostCSS for advanced CSS features [x] CSS Modules for styling React components [x] PreCSS for Sass-like CSS

Server side

[x] Koa@2 [x] KoaRouter for server side routing [x] RethinkDB as realtime backend [x] React server-side renderer

Connectivity

[x] Socket.io for client/server connectivity

Development

[ ] Docker dev environment [x] custom Webpack development server with hot reloading [x] Depcheck for dependency checking [x] npm-check-updates [ ] Webpack DLL plugin

Testing

[x] Mocha, Chai, Sinon for unit testing [x] Enzyme and Chai Jest Snapshot for snapshot testing react components [x] Nightmare JS for acceptance testing [x] Istanbul for coverage reporting

Code quality

[x] ESLint for javascript linting [x] Stylelint for PostCSS linting [x] Husky for enforcing code quality on commit [ ] semver

Setup

npm i -g pnpm
NODE_ENV=development pnpm install
pnpm install -g rethink-migrate pm2 node-inspector

Production

To start the app in production run:

npm start

To use pm2 to run and automatically restart the server, edit process.json and run:

pm2 start process.json

And to stop the daemonized server

pm2 stop rrr

Development workflow

Run the development toolset:

pnpm run dev

The services are running at these ports by default

BrowserSync: 3030 Browsersync UI: 3031 Webpack dev server: 3000 Server: 3001 Server Debugger: 5859 Node inspector: 8008

Open http://localhost:3030 to start developing.

Optional Development Tools

Install React Developer Tools and Redux DevTools extensions for Chrome.

Dependency checking

To check your dependencies run pnpm run depcheck

Testing

Unit and integration testing

This project uses mocha, chai, sinon, jsdom and enzyme for unit / integration testing. Single test run: pnpm run test:unit

Watch mode: pnpm run test:unit:watch

Acceptance testing:

For acceptance testing

If you get a timeout while running acceptance tests, it might be an issue with electron. Try to run DEBUG=nightmare pnpm run test:acceptance or node_modules/electron/dist/electron for further analysis.

Acceptance testing on CI server:

To run electron on a headless CI server, Xvfb is required. e.g. for https://wiki.jenkins-ci.org/display/JENKINS/Xvfb+Plugin

Make sure you export the DISPLAY to use.

Linting

npm run lint will run prettier-eslint and then check the output with eslint

ESDoc

To generate documentation run pnpm run esdoc

i18n

Configure your languages in src/client/i18n Extract messages from your react components: pnpm run translate This will generate JSON files in src/translations for each language. After translating all messages, don't forget to rebuild the bundle.