Starting monorepo with React UI components following Atomic Design principles
A template of a monorepo to create a react application.
- Monorepo tooling (Yarn workspaces and Lerna)
- Precommit validation (Husky and Lint-staged)
- Linting with recommended rules (Eslint,Prettier and Stylelint)
- Github actions (test, lint, etc)
- Storybook (with HMR)
- CSS in Js (Emotion)
- HMR on packages (React fast refresh)
- App running in CSR and SSR
- Unit testing (Jest and React testing library)
- Bundling (Webpack 5)
- Prevent duplicated versions of packages (Dedubcheck)
- HTTP requests on server/client Isomorphic and state management (Apollo/client)
- Deployed to production (Heroku)
- End 2 End tests (Cypress)
- Auto update typescript project references(Update-ts-references)
- Generator to create packages in the monorepo (Hygen)
- Graphql schema validation and type checking (eslint-plugin-graphql) and (apollo-tooling)
- Automatic create and validate the graphql schema on pipeline
- Jest shared configs easily
- Jest with recommend rules for react/node projects
- Tsconfig with recommend rules for react/node projects (tsconfig/bases)
- Package Manager (Yarn 2)
- Multiple team project handling tool (Codeowners and Merge bot)
- Document how to handle peerdependencies on the monorepo
- Load tests (Artillary)
Run all the commands from the root folder The monorepo is built in a way where you don't need to change from the root to run any command
yarn
yarn start
yarn start:server
yarn build
yarn watch
yarn lint
yarn test
yarn test:dependencies
yarn storybook
yarn test:e2e
note: you need to start the client
On your project do this steps:
Login in your heroku account
heroku login
This will create a project in the heroku account you loggedin previously
heroku create
Can be master or main the next command depending on your repo
git push heroku master
Note: This part requires you to have a heroku account
They are updated automatically as soon as you do yarn
- GPL-3.0-or-later
- Copyright 2022 © IberaSoft.