search

wmonk / create-react-app-typescript

DEPRECATED: Create React apps using typescript with no build configuration.
3.71k stars 493 forks source link

Support Lerna/Yarn Workspaces #295

Open osdiab opened 6 years ago

osdiab commented 6 years ago

Is this a bug report?

No.

As discussed in https://github.com/facebook/create-react-app/issues/1333 and merged in https://github.com/facebook/create-react-app/pull/3741, create-react-app@2.0.0 has support for monorepos. I'd like to make use of that functionality in my create-react-app-typescript projects, want to make sure this doesn't get lost as time goes on :) Looks like 2.0.0 hasn't been released yet, so we can wait on that.

untsamphan commented 6 years ago

I've implemented a workaround using tsc's baseUrl which CRA-ts already supported.

https://github.com/untsamphan/cra-ts-monorepo-example

Need to eject (only) if you want tsc/webpack to grab .ts from the local 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 (go to definition -> .ts), 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

watiko commented 5 years ago

@untsamphan Thank you for your great instructions. This is very much helpful for me. However I'd not like to eject and manage complicated configurations so I made another version using react-app-rewired.

Thx again!

hieu-nv commented 5 years ago

You can try to use https://www.npmjs.com/package/@hieunv/react-scripts. See sample https://github.com/react-chartjs/core

First, You create a project with

cd packages
npx create-react-app my-app --scripts-version=@hieunv/react-scripts