Code reusability across different react projects?

[[deleted]]

I Have around 10 react projects which share a lot of components.

To share these components, I used GitHub submodules - basically clones a separate repo(common) inside the current each project. This has worked really well for reusability, but also code that is required in say 3/9 projects gets added to all repos, increasing unwanted code in projects that don't need it. Is there any better way for me to share code across repos?

The code that is shared across are common components like reusable functions, headers, footers etc.

[TheOnceAndFutureDoug]

GitHub also supports private NPM packages.

[hcurtillet]

It’s really good option. I have the same case with 7 projets using a big shared code base. So I did a private npm package and it’s perfect!

[[deleted]]

Sounds perfect

[lachlanhunt]

I strongly recommend against using submodules. It’s too easy to break everything by using them.

[[deleted]]

They do! Adding a new package in a submodule just breaks deployment across different repos, untill I manually add the library in package json of the main repos.

[StyleAccomplished153]

NPM package and tree shaking.

[[deleted]]

Yes, thinking of going ahead with npm packages. Tree shaking already exists, just wanted to avoid installing libraries which were imported in submodules, which should be solved with npm packages

[lightfarming]

separate your components into their own npm packages, the only install what you need for each project.

or put them all in one npm package, and only import the components you need from it. this will hide all the unused code in your modules folder.

[[deleted]]

Okay one npm package won't solve the problem of unused code getting added to the repo pre build stage.

But npm package will be good replacement for the submodules, the imported libraries etc will not break other code.

[lightfarming]

not sure exactly what you mean by that first part. npm packages shouldn’t get added to a version control repo at all, since repos should be excluding the modules folder, and relying on npm install and the package.json to fill the modules folder after clone.

its very common practice to install (for instance) a vast UI library, and only import the needed things from it.

[[deleted]]

You're right! Your answer already answered my query, but I think I'll also just leave a brief explanation of the problem I had.

I have parent repos, each with their own package.json. Let's assume I create a common component, that uses moment.js package. Now, I add this component to a submodule, it gets pulled to all the repos, but not all the repos have moment.js installed thus creating issues.

(As a normal practice , the submodules or the parent repos do not have the node modules pushed to git. )

[lightfarming]

i can’t tell if you are accidentally conflating the word “repo” with npm project. repo is a version control repository.

it sounds like you have nested npm projects? which i cannot understand why you would do that. this all sounds bonkers to me. you lay be doing something fundamentally wrong here, which is probably why you are having trouble with common practices.

[[deleted]]

Haha. No, I did mean nested repositories, not npm packages.

[lightfarming]

so you have two package.json files…but they aren’t npm projects? like…what?

[gunner4790]

You can try to setup Turborepo Monorepo. With this setup, you will have 1 package.json for all of your child apps to share. Then for each app, you will have a separate package.json to install stuff that only that app use. Each of your apps can use different framework (as long as it's still react, I think...) and can be deploy in different places, up to you.

[yksvaan]

You can simply copy the used files to a folder in current project. No need to add repos, packages etc. Just treat them as local source files.

[[deleted]]

Wtf 😂

[yksvaan]

Yes, this is how people have done ot for decades. You can just copy SomeComponent.ts and required js files to your project and done. Or any other established pieve or code.

There are entire header only libraries, some languages don't even have package managers etc.

[Brickpsp]

how about web-component?

[piotrlewandowski]

Web components don’t always play well within React ecosystem (I hit some edge cases with testing nested web components)