Tocco Client
This repository contains the web client for the Tocco Business Framework.
This project is based on following technologies, tools and libraries:
Initial project structure is based on: https://github.com/davezuko/react-redux-starter-kit.
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 inpackage.json; in folder structuretocco-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.
Documentation
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:
- http://redux.js.org/
- https://medium.com/sons-of-javascript/javascript-an-introduction-to-es6-1819d0d89a0f
- https://davidwalsh.name/es6-generators
Development
Prerequisites
Run a Tocco Business Framework application with enabled REST API on: http://localhost:8080
Getting started
Just install yarn https://yarnpkg.com/en/docs/install 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
Tests are using following tools and libraries:
All packages:
npm test
Single Package:
npm test --package={PACKAGE_NAME}
During development with watch:
npm run test:dev --package={PACKAGE_NAME}
Generators
The project provides some code generators. Generators are developed with Plop and can be executed with:
npm run plop
At the moment there is a generator to create a react-component and a generator to add a redux-action.
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}
Linting
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
Contribute
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>
<body>
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent