Web Client for the Tocco Business Framework

Tocco Client

Build Status codecov devDependencies Status

This repository contains the web client for the Tocco Business Framework.

This project is based on following technologies, tools and libraries: * React * Redux * redux-saga * flowtype * npm * webpack * Lerna

Initial project structure is based on:

Project Structure

This project uses Lerna for package management. The repository is maintained as monorepo.

Packages are located in folder packages/. Every package maintains its own dependencies and can be re-used in other packages.

Package naming

  • tocco-... naming is used in package.json; in folder structure tocco- prefix can be omitted

Please ensure that every package is prefixed with tocco-

Package tocco-ui

Package tocco-ui is a collection of reusable components. Components can be seen in action in the showcase-app deployed on GitHub. Content of this page is re-generated by Travis-CI on any change to packages tocco-ui or tocco-ui-showcase.


Since this project heavily uses Redux and Sagas, you should be aware of it’s concepts and also ES6. A good starting point can be found in these docs: * * *



Run a Tocco Business Framework application with enabled REST API on: http://localhost:8080

Getting started

Just install yarn and execute the following commands:

npm install --global [email protected]
npm run setup
lerna bootstrap
npm start --package={PACKAGE_NAME}

Open http://localhost:3000 and start coding!


Tests are using following tools and libraries: * Karma * Mocha * Sinon * Chai * Enzyme

All packages:

npm test

Single Package:

npm test --package={PACKAGE_NAME}

During development with watch:

npm run test:dev --package={PACKAGE_NAME}

Publish bundle

Once the package is ready to publish, run following npm scripts. This registers the bundle in the npm registry.

lerna publish

Only build:

npm run deploy:dev --package={PACKAGE_NAME}
npm run deploy:prod --package={PACKAGE_NAME}


Eslint is used for linting. Linting will also be executed automatically on our CI.

npm run lint

And automatically fix issues:

npm run lint:fix


Pull requests

  • Create a remote branch that fits the following naming convention: pr/{package}-{description-of-contribution}
  • Push commits to this branch. Set a commit message as described below.
  • Once all changes are pushed, create a pull request. The changes should never break a package and therefore must be self-contained.
  • The pull request will be verified by TravisCI and Codecov. If one of them returns a bad result, the problems have to be fixed.
  • Optionally assign a reviewer manually.
  • Once the pull request is merged, the branch must be deleted.

Git Commit Msg

Similar to Karma commit messages follow this convention:

<type>(<scope>): <subject>


Message subject (first line)

First line must not be longer than 70 characters, second line is always blank and other lines should be wrapped at 80 characters.

Allowed <type> values: - feat (new feature) - fix (bug fix) - docs (changes to documentation) - style (formatting etc.; no code change) - refactor (refactoring production code) - test (adding missing tests, refactoring tests; no production code change) - chore (updating grunt tasks etc; no production code change)

Example <scope> values: - If the changes affect a single package the scope is set to package name (e.g. login) - If the change is a global or difficult to assign to a single package the parentheses are omitted. - If changes affect the monorepo itself, the scope is set to ‘tocco-client’

Message body

  • uses the imperative, present tense: “change” not “changed” nor “changes”
  • includes motivation for the change and contrasts with previous behavior

Setup Linting with IntelliJ

  • Install ESLint Plugin
  • Settings (Preferences on OS X) | Languages & Frameworks | JavaScript | Code Quality Tools –enable
  • Settings (Preferences on OS X) | Editor | Inspections | Code style issues | Unterminated statement – disable

Related Repositories



Web Client for the Tocco Business Framework ...