Babel React Koa - Hot Universal Boilerplate
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.
https://tomatao.gitbooks.io/breko-hub/content/
- Enables building universal SPAs
- A modern redux architecture
- Hot reloading of CSS-modules
- Fast server side hot reloading
- 99% ES-next code-base
- Hot reloading unit tests in a browser
- A comprehensive functional and unit test suite
- A lucid code-base
- A pretty console output
- Useful debugging tools
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.
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>
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.
To claim the project:
git apply ./patches/0001-remove-most-example-code.patch
This removes:
- /bar route related code
- /oops route related code
- /private route related code including flash messages support
You will be left with a HomeRoute with some copy inside. Also the App.js component will have some meta data that you should update. Also, don't forget to update the name in your package.json!
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.
Breko hub uses the following libraries at its core:
- webpack - A module bundler.
- babel - A JavaScript compiler.
- webpack-isomorphic-tools - Library for isomorphic rendering.
- 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.
- 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.
- lodash - A popular modular utility library.
- ramda - A modular utility library focused on functional programming.
- SCSS - A popular CSS preprocessor.
- PostCSS - CSS transformations with JavaScript.
- css-modules - A build step for modular, local scoped CSS management.
Developing
npm run 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 always 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.
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 thresholds in check.