Babel React Koa - Hot Universal Boilerplate

Breko Hub

Breko-hub is a Github repository helping anyone create new JavaScript applications. Giving you a technically sound and tested starting point for your application.

Documentation

https://tomatao.gitbooks.io/breko-hub/content/

Features

Enables building universal SPAs
A modern redux architecture
Hot reloading of CSS-modules
Fast server side live updates
99% ES Next code-base
Hot reloading unit tests
Run unit tests in a browser for debugging
A comprehensive functional and unit test suite
A lucid code-base
A helpful console output
Debugging tools

Quick Start

Use the following commands to start your new app using breko-hub.

git clone [email protected]:tomatau/breko-hub.git <directory-name>
cd <directory-name>
npm i
mv example.env .env
npm start

With the default .env file, this starts your application in development mode. A configuration for running the debugger with a colourful console output for debugging.

Open a browser window at localhost:9001.

Blog

A blog documenting techniques used in Breko-hub. The blog used Breko-hub as a starting point.

Libraries

Breko hub uses the following libraries at its core:

Build tools

webpack - A module bundler.
babel - A JavaScript compiler.
webpack-isomorphic-tools - Library for isomorphic rendering.
css-modules-require-hook - Modifies node require to compile css-modules.

Server

koa - A lightweight server framework.
koa-router - Router middleware for koa.
socket.io - A node engine for WebSocket communication.
redux-via-socket.io - An adapter for sharing redux actions over WebSockets.

Universal Application

react - A library for building interfaces.
redux - A library for state management.
react-router - A routing library for React.
react-router-redux - Binding between react-router and redux.
redial - Universal data fetching for React.
redux-saga - Side-effect management for redux.
reselect - A library for creating state selectors.
redux-promise-middleware - A redux middleware for creating asynchronous actions.

Utility

lodash - A popular modular utility library.
ramda - A modular utility library focused on functional programming.

Styling

SCSS - A popular CSS preprocessor.
PostCSS - CSS transformations with JavaScript.
css-modules - A build step for modular, local scoped CSS management.

Commands

Developing

npm start [-- --open]

Builds and serves app with hot reloading and debugging support.

Build client-side app

npm run build

Creates bundles and assets into ./src/static directory. Reads .env but uses production Webpack configuration.

Start the server

Set the NODE_ENV flag to production in your .env file.

npm start

Expects bundles and assets to exist in the ./src/static directory. Runs the server in production mode.

Run unit and function tests

npm test

Unit test development server

npm run test:server

Start a test server using Mocha and Webpack-middleware. Provides a browser based testing environment. Loading tests from within ./src where extension is .test.js.

Unit test single run

npm run test:unit

Runs the test suite in a node environment through mocha, once.

Functional/integration tests run

npm run test:func

Runs functional tests inside ./test/functional directory.

Lint

npm run lint
npm run lint:styles

Reads .eslintrc and sass-lint.yml for linting configurations.

Coverage

npm run coverage
npm run coverage:check

Reads.istanbul.yml for threshold configurations. Generates a report and `coverage:check` returns false when thresholds are not met.

README