This is a simple monorepo template with some specific design goals:
- Latest TypeScript version
- Fast, incremental dependency updates and builds
- No package bundler
- Watch mode works
- ESM and CJS work (with distinct build outputs)
- Vanilla TS and React packages work
- Create React App works* (with hot module reloading of the entire workspace)
- Parcel works (with HMR)
* Create React App, which uses Webpack 5, can't resolve ES modules without .mjs file extensions by default, so react-app-rewired is minimally used to configure Webpack to do this.
- Node 16+
- PNPM
If you have Node 16+, you can activate PNPM with Corepack:
corepack enable
corepack prepare pnpm@`npm info pnpm --json | jq -r .version` --activate
Corepack requires a version to enable, so if you don't have jq installed, you can install it, or just manually get the current version of pnpm with npm info pnpm
and use it like this:
corepack prepare pnpm@7.8.0 --activate
git clone https://github.com/jordansexton/typescript-monorepo.git
cd typescript-monorepo
pnpm install
Run this to build all your workspace packages.
pnpm build
This will build workspace packages that use tsc
for compilation first, then everything else.
Run this to build and watch workspace packages that use tsc
for compilation.
pnpm watch
Other packages can build and run with their own tools (like CRA's react-scripts commands).
Run this in a separate terminal from the watch
command.
cd packages/app/create-react-app
pnpm start
A basic CRA app will now be running. Go change the file packages/core/base/src/helloWorld.ts
. This file is used by the file packages/ui/react/src/HelloWorld.tsx
, which is used by the CRA app.
Change the string 'Hello, world!'
to some other string, and save the file. The CRA app should update automatically, reflecting this deeply nested change.