Home

Awesome

Github workflow status

Babel React Koa - Hot Universal Boilerplate

Breko Hub

Greenkeeper badge

Breko hub is a github repository that helps anyone create new JavaScript applications. Giving you a technically sound and well tested starting point for your application.

Why?

Create-React-App, Razzle, NextJS, etc... are fantastic alternatives!

The reason for Breko-hub is that it comes with some extras:

Why not?

Documentation

https://tomatao.gitbooks.io/breko-hub/content/ (outdated)

Features

Prerequsits

Breko-hub will only work on node version 6 and above as it is making use of Koa v2 along with polyfills for async/await syntax. To make it work on a lower version of node, the runtime compilation would need to be applied to koa and other node_modules.

Quick Start

Use the following commands to get started on your new app using breko-hub.

git clone --depth=1 git@github.com:tomatau/breko-hub.git <directory-name>
cd <directory-name>
rm -rf .git
git init
npm i
mv example.env .env
npm start

With the default .env file, this will start your application in development mode on port 9001. It also provides a configuration for running the debugger with a useful console output.

Open a browser window at localhost:9001.

You'll see example routes that demonstrate API calls and flash messages after redirects.

You can remove the example code for a cleaner starting point by running:

npm run remove-examples

This is a one time operation that can't be undone, it's also advised to run this before you start making any changes as it will hard replace some ./src files.

Blog

There is also a new blog that documents some of the techniques used in breko-hub. The blog was also created using breko-hub as a starting point.

Libraries

Breko hub uses the following libraries at its core:

Build tools
Server
Universal Application
Utility
Styling

Commands

Developing

npm run start [-- --open]

Builds and serves app with hot reloading and debugging support.

Build client-side app

Change your NODE_ENV to "production", you can do this is .env file or your hosted environment.

npm run build

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

Start the server in production

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.

Unit test single run

npm run test:unit

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

integration tests run

npm run test:int

Runs integration tests inside ./test/integration directory.

Lint

npm run lint:js
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 thresholds in check.

Unit test development server (BROKEN)

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.

Configuration

Change anything you want! It's all exposed and for you! <3

Docker

There's a starting docker images you can use to get going. You'll probably wanr to modify the Dockerfile to your needs.

# production image built with assets
$ docker build --compress -t your-username/your-app-name .
# runs `npm start` with port at 9001
$ docker run -p 9001:9001 your-username/your-app-name