Example CRA project with multiple local TypeScript packages in a monorepo

Goals

1. To upgrade internal modules (in app source tree) to independent local private packages.

2. To share code between CRA-ts apps in a monorepo

3. While still be able to use IDE 'go to definition' to go to .ts source, instead of .d.ts

Tools

1. create-react-app (will eject to config webpack/jest to achieve #3 goal)

2. react-scripts-ts

3. yarn workspace

Project structure

/                  <-- project root
  - packages/      <-- local packages root
    - mymain/      <-- a local packages
      - build/     <-- tsc outDir
      - src/       <-- TypeScript source file
      - index.ts   <-- tsc import will use this if no build/
          export * from './src';
      - package.json
        {
          "name": "mymain", "version": "0.1.0", "license": "UNLICENSED", "private": true
          "main": "build/index.js",       <-- for webpack import
          "types": "build/index.d.ts",    <-- tsc import will use this if there's build/
        }
      - tsconfig.json

  - webapp/        <-- a CRA-ts project, use mymain
    - src/
    - typescript.json
      {
        "extends": "../tsconfig-base.json",
        "compilerOptions": {
          "baseUrl": "../../packages",    <-- allow import from 'mymain'
          "outDir": "build/dist"
        }
      }
    - package.json

  - tsconfig-base.json  <-- common tsconfig
  - package.json
    {
      "name": "cra-ts-monorepo-example", "private": true,
      "workspaces": [ "webapp", "packages/*" ]
    }

Steps

1. Initial boilerplate from create-react-app-typescript in root/webapp commit.

2. Create yarn workspace commit.

3. Move CRA tsconfig.json to root to be shared with other local packages commit 1, commit 2.

4. Implement a trivial local packages root/packages/mymain commit. Run yarn now so it'll create symlink to mymain in root/node_modules. Then we can import from 'mymain' from anywhere.

5. Make the CRA app use the new local packages commit. Now the CRA app will tsc compile correctly (because we have index.ts at mymain root). But when yarn start it'll fail in browser because mymain isn't built. To fix this we can tsc in mymain to build the package and the app will run successfully. However, when we go to definition to a symbol in mymain, it'll goto a .d.ts.

6. To achieve goal #3, we configure tsconfig.json baseUrl to directly reference local packages. Since webpack won't bundle code outside webapp/src, and jest won't find the packages, we have to eject to configure them. commit

7. Simple webpack config hack to allow it to bundle code outside webpack/src. This to achieve goal #3. commit. Don't forget to delete build in local packages, because otherwise everyone will use build/index.* (per NPM spec) instead of index.ts at the local package root (a TS-specific behavior).

8. Simple jest config hack to make jest inside webapp also run all tests in local packages. commit