{"id":14967391,"url":"https://github.com/tomatau/breko-hub","last_synced_at":"2025-05-02T22:31:02.965Z","repository":{"id":2777792,"uuid":"43847008","full_name":"tomatau/breko-hub","owner":"tomatau","description":"Babel React Koa Hot Universal Boilerplate","archived":false,"fork":false,"pushed_at":"2023-01-23T20:37:15.000Z","size":8087,"stargazers_count":141,"open_issues_count":20,"forks_count":34,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-14T22:20:40.799Z","etag":null,"topics":["babel","css-modules","javascript","koa","lint","mocha","modular","react","redux","webpack"],"latest_commit_sha":null,"homepage":"https://breko-hub.herokuapp.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomatau.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-07T21:56:04.000Z","updated_at":"2023-11-07T12:40:43.000Z","dependencies_parsed_at":"2023-02-13T03:01:47.070Z","dependency_job_id":null,"html_url":"https://github.com/tomatau/breko-hub","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomatau%2Fbreko-hub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomatau%2Fbreko-hub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomatau%2Fbreko-hub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomatau%2Fbreko-hub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomatau","download_url":"https://codeload.github.com/tomatau/breko-hub/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252116082,"owners_count":21697304,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","css-modules","javascript","koa","lint","mocha","modular","react","redux","webpack"],"created_at":"2024-09-24T13:37:59.287Z","updated_at":"2025-05-02T22:30:58.148Z","avatar_url":"https://github.com/tomatau.png","language":"JavaScript","funding_links":[],"categories":["Marks"],"sub_categories":["Boilerplate"],"readme":"![Github workflow status](https://github.com/tomatau/breko-hub/workflows/Pull%20request%20and%20Push%20master%20workflow/badge.svg)\n\n**B**abel **Re**act **Ko**a - **H**ot **U**niversal **B**oilerplate\n\n## Breko Hub\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/tomatau/breko-hub.svg)](https://greenkeeper.io/)\n\nBreko 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.\n\n## Why?\n\nCreate-React-App, Razzle, NextJS, etc... are fantastic alternatives!\n\nThe reason for Breko-hub is that it comes with some extras:\n- test setup for integration on client and server\n- test setup with additional helpers\n- config management\n- accessibility features on routing\n- code splitting configuration\n- configuration for linting\n- it's not a framework, tool or library -- so everything is transparent!\n\n## Why not?\n\n- The community around the alternatives are much bigger!\n- There's more exposed configuration\n- The documentation is lacking because\n- tomatau: \"I might stop supporting it one day, although I don't intend to!\"\n- The alternatives have some very nice features!\n\n### Documentation\n\n[https://tomatao.gitbooks.io/breko-hub/content/](https://tomatao.gitbooks.io/breko-hub/content/) (outdated)\n\n### Features\n\n- Quick setup universal SPAs\n- Universal redux architecture\n- Hot reloading of CSS-modules\n- Fast server side hot updates\n- Babel 7 codebase everywhere\n- A comprehensive integration and unit test suite\n- A lucid code-base\n- Great debugging tools!\n\n### Prerequsits\n\nBreko-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.\n\n### Quick Start\n\nUse the following commands to get started on your new app using breko-hub.\n\n```bash\ngit clone --depth=1 git@github.com:tomatau/breko-hub.git \u003cdirectory-name\u003e\ncd \u003cdirectory-name\u003e\nrm -rf .git\ngit init\nnpm i\nmv example.env .env\nnpm start\n```\n\nWith 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.\n\nOpen a browser window at `localhost:9001`.\n\nYou'll see example routes that demonstrate API calls and flash messages after redirects.\n\nYou can remove the example code for a cleaner starting point by running:\n\n```bash\nnpm run remove-examples\n```\n\nThis 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.\n\n### Blog\n\nThere is also a new [blog](https://tomatao-blog.herokuapp.com/) that documents some of the techniques used in breko-hub. The blog was also created using breko-hub as a starting point.\n\n### Libraries\n\nBreko hub uses the following libraries at its core:\n\n##### Build tools\n- [webpack](https://webpack.github.io/) - A module bundler.\n- [babel](http://babeljs.io/) - A JavaScript compiler.\n- [webpack-isomorphic-tools](https://www.npmjs.com/package/webpack-isomorphic-tools) - Library for isomorphic rendering.\n\n##### Server\n- [koa](http://koajs.com/) - A lightweight server framework.\n- [koa-router](https://github.com/alexmingoia/koa-router) - Router middleware for koa.\n- [socket.io](http://socket.io/) - A node engine for WebSocket communication.\n- [redux-via-socket.io](https://www.npmjs.com/package/redux-via-socket.io) - An adapter for sharing redux actions over WebSockets.\n\n##### Universal Application\n- [react](http://facebook.github.io/react/) - A library for building interfaces.\n- [redux](http://redux.js.org/) - A library for state management.\n- [react-router](https://github.com/reactjs/react-router) - A routing library for React.\n- [connected-react-router](https://github.com/supasate/connected-react-router) - Binding between react-router and redux.\n- [redux-saga](https://github.com/yelouafi/redux-saga) - Side effect management for redux.\n- [reselect](https://github.com/reactjs/reselect) - A library for creating state selectors.\n- [redux-promise-middleware](https://github.com/pburtchaell/redux-promise-middleware) - A redux middleware for creating asynchronous actions.\n\n##### Utility\n- [lodash](http://lodash.com/) - A popular modular utility library.\n- [ramda](http://ramdajs.com/) - A modular utility library focused on functional programming.\n\n##### Styling\n- [SCSS](http://sass-lang.com/guide) - A popular CSS preprocessor.\n- [PostCSS](http://postcss.org/) - CSS transformations with JavaScript.\n- [css-modules](https://github.com/css-modules/css-modules) - A build step for modular, local scoped CSS management.\n\n### Commands\n\n**Developing**\n\n```bash\nnpm run start [-- --open]\n```\n\nBuilds and serves app with hot reloading and debugging support.\n\n**Build client-side app**\n\nChange your NODE_ENV to \"production\", you can do this is `.env` file or your hosted environment.\n\n```bash\nnpm run build\n```\n\nCreates bundles and assets into `./src/static` directory. Reads `.env` but always uses production Webpack configuration.\n\n**Start the server in production**\n\nSet the NODE_ENV flag to production in your `.env` file.\n\n```bash\nnpm start\n```\n\nExpects bundles and assets to exist in the `./src/static` directory. Runs the server in production mode.\n\n**Unit test single run**\n\n```\nnpm run test:unit\n```\n\nRuns the test suite in a node environment through mocha, once.\n\n**integration tests run**\n\n```\nnpm run test:int\n```\n\nRuns integration tests inside `./test/integration` directory.\n\n**Lint**\n\n```\nnpm run lint:js\nnpm run lint:styles\n```\n\nReads `.eslintrc` and `sass-lint.yml` for linting configurations.\n\n**Coverage**\n\n```\nnpm run coverage\nnpm run coverage:check\n```\n\nReads `.istanbul.yml` for thresholds in check.\n\n**Unit test development server (BROKEN)**\n\n```bash\nnpm run test:server\n```\n\nStart a test server using Mocha and Webpack-middleware. Provides a browser based testing environment. Loading tests from within `./src` where extension is `.test.js`.\n\n\n### Configuration\n\nChange anything you want! It's all exposed and for you! \\\u003c3\n\n## Docker\n\nThere's a starting docker images you can use to get going. You'll probably wanr to modify the Dockerfile to your needs.\n\n```bash\n# production image built with assets\n$ docker build --compress -t your-username/your-app-name .\n# runs `npm start` with port at 9001\n$ docker run -p 9001:9001 your-username/your-app-name\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomatau%2Fbreko-hub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomatau%2Fbreko-hub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomatau%2Fbreko-hub/lists"}