DEV Community

Cover image for TypeScript monorepo for React project

TypeScript monorepo for React project

stereobooster on May 25, 2019

UPD: with the help from the community some of the problems were resolved. Not all steps in What I did section are updated, but github repo contains...
Collapse
 
buinauskas profile image
Evaldas Buinauskas

blog.nrwl.io/powering-up-react-dev...

While it was built for Angular, it does support React projects as well.

I'm not sure if this will solve all of the problem above, but this is worth giving a shot.

Collapse
 
the_ult profile image
Arjen

Indeed, take a look at nx.dev/react/fundamentals/build-fu...

  • Monorepo
  • Typescript
  • Build tools / control
  • Storybook
  • Jest
  • Cypress
Collapse
 
checkmatez profile image
Max • Edited

You might want to take a look at Apollo monorepo setup: github.com/apollographql/apollo-se....
In particular, you can address "problem 1" by adding "composite": true and "references" to tsconfig.json in packages, so Typescript compiler will take care of building in the right order. This requires Typescript 3.0+ (typescriptlang.org/docs/handbook/p...).
Problem 2 will go away if you use different tsconfig for testing.

Collapse
 
stereobooster profile image
stereobooster

Yep, people already point this out github.com/stereobooster/typescrip.... All problems resolved.

Problem 2 can't be solved gracefully with different config, because we need to run build before running tests, so it will get confusing. Instead I added babel to process ES6 modules

Collapse
 
unleashit profile image
unleashit

I know what you mean about it being time consuming. I think I spent much more than a half a day...

But at least for my use case, a library of npm packages in Typescript, I either solved or didn't have most of the problems you mention.

Problem 1: I did have this one and your solution (not using parallel) was what I ended up with. Not sure if there's a better solution unless Lerna came up with an api that lets you scope packages in groups (with separate concurrency settings).

Problem 2: I ended up having Webpack handle Typescript and output as UMD in each of the packages. This works, but results in bigger bundles so I want try switching to using Babel.

Problem 3: didn't have this problem, probably because of Webpack. I use Jest (with ts-jest) without having to build first, in watch mode, etc. with no issues.

Problem 4: I did get Storybook working ok, but due to some unrelated issues with data I opted to roll my own demo app. I can't remember if it had the cli vs browser issue with type errors, it might have.

One issue I do have that I haven't solved is hot module replacement. I didn't put much time into it, but wasn't able to get it working with my setup. Standard reload does work at least.

Honestly, I agree it would be nice if this could all get simpler. But I'm excited that it's possible. Aside from UI libraries it's a great way to share isomorphic code, common code between React Native and a web app, etc. Not to mention the disk space savings. For me, I see it as one of those things that's a bit rough on the edges now but will hopefully improve with time.

I would take this repo for a grain of salt, as it's my first attempt at a monorepo (and some things like name choices were done pretty hastily): github.com/unleashit/npm-library

Collapse
 
goodidea profile image
Joseph Thomas

I'm in the middle of working through some of the same problems. Here's the repo:

github.com/good-idea/sane-shopify

For problem #2: I'm using Rollup to build the packages, and it has been very painless so far. This was a helpful article: medium.com/@ali.dev/how-to-publish...

Collapse
 
stereobooster profile image
stereobooster

This is how I solved problem #2 github.com/stereobooster/typescrip...

Collapse
 
chaseholdren profile image
Chase Holdren

You claim to "appreciate convention over configuration" but you are trying to accomplish a very "unconventional" setup. Doesn't make sense

Collapse
 
diversemix profile image
diversemix

What is your suggestion for a more conventional approach?

Collapse
 
haryantowang09 profile image
Haryanto • Edited

Hi, first thanks a ton for spending your time to test figure out stuff even writing and publish it.
Just in case you wonder, I found article react lerna with typescript here. medium.com/@sisosys7/a-monorepo-se...

probably you may had seen it, but I can run it successfully following the steps there.
Peace :)

edit : after checking here and there, the source that I put is just a minimal how react + typescript + lerna.
It does not have tests, yarn workspaces, and probably more.
I also check in your github repo for this monorepo things and i can see many progress here and there how to fix the Problems above.

Thank you for your post.

Collapse
 
dmytro_dmytro_dmytro profile image
Dmytro Dmytro

Cool article! Thanks. In turn, I have something that worth to check - webman.pro/blog/how-to-setup-types...
In the article, I covered the aliases related issues we can face with configuring Typescrit/React/Node.js/Lerna monorepo.

Collapse
 
a1300 profile image
a1300

@stereobooster thanks for this article! 👍

It helped me with a project. I created an account on dev.to solely to like your article and leave this comment!

Collapse
 
stereobooster profile image
stereobooster

Thanks. Yes, it took some time (more than I expected). When I initially shared the project I didn't have all the process. Community helped to figure out some questions.

To be fair it is unstable - in my current project TypeScript errors don't show up in Storybook :facepalm: (but they did before)

Collapse
 
bjerh profile image
Jakob Bjerre Petersen

Great read. Where I've got the wall personally is with sass modules.

I've ended up with huge webpack bundles. That's hardly developer friendly.