Monorepo + TypeScript + CRA + Storybook + jest + eslint
yarn
yarn start:cra
yarn start:storybook
yarn compile
yarn compile:watch
yarn lint
yarn test
yarn build:cra
yarn build:storybook
This is entirely managed by Yarn Workspaces built-in functionalities. There are 2 types of workspaces:
apps/*
: is hosting deployable web apps (CRA, Next.js, Gatsby, Storybook, ...)packages/*
: is hosting buildable, sharable and publishable packages (TypeScript -> es5)To detect issues as soon as possible, 2 specific tools have been added:
husky
is hooking git actions to specific tasks (commit -> lint, push -> test)lint-staged
is hooking specific tasks based on the files currently stagedBoth the packages and app(s) are using .ts/.tsx files but their output is generated differently.
react-scripts
is in charge of compiling the filesTypeScript references is used to compile all the packages at once. It's entrypoint is packages/tsconfig.ref.json
.
Each package has 2 tsconfig files:
<MY-PACKAGE>/tsconfig.build.json
: this is used to generated the build (es5 + source map + types)<MY-PACKAGE>/tsconfig.json
: this is used to lint/test and also for any editor supporting running a typescript server instance.packages/tsconfig.build.json
and packages/tsconfig.json
.Different things happen during the linting process:
tsc
compliles without emitting an outputtypescript-eslint
lints each package, using the local tsconfig.json
, checking the source code and the test filesprettier-check
detects the files which are not following the prettier configNo surprise here, jest
and testing-library
are used respectively as test runner and renderer (and extending the assertions).
ts-jest
as been added as a plugin of Jest in order to support TypeScript.