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... [Read Full]
markdown guide
 

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.

 

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

 

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...

 
 

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

 

What is your suggestion for a more conventional approach?

 

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.

 

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

 

@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!

 

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)

 

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.

code of conduct - report abuse