DEV Community

Cover image for How to Easily Reuse Components Across Projects and Repositories

How to Easily Reuse Components Across Projects and Repositories

Eden Ella on September 17, 2019

Build, distribute and collaborate over components to build multiple projects and applications — a practical guide. Components drive the ...
Collapse
 
vlaja profile image
Vlatko Vlahek • Edited

This is a great case imho.

Building monorepo component libraries allow people to collaborate on improving current code and reusing an always stable version across projects. Apart from that, it makes it easier to write tests for what you want to achieve and for me personally it allows better knowledge sharing in contrast to "i made a small change to that component in project X".

We use Lerna + Storybook for React/Typescript combo inhouse.

Collapse
 
phillyvanilly profile image
philly-vanilly

You might want to try NRWL/Nx, comes from the Angular world, but is available for React too (not Vue yet, unfortunately)

Collapse
 
davebloom1 profile image
davebloom1

I'm a bit confused (pun intended) - is Bit an open-source or a paid platform?

Collapse
 
giteden profile image
Eden Ella

Bit is open-source (and completely free)- you can use it to manage your components by yourself...

bit.dev uses Bit and offers hosting, live playground, search capabilities etc. - you may use it for unlimited component collections for free as long as you keep it public... otherwise, if you need private storage, you can either pay or get a more limited plan...

Collapse
 
dennisk profile image
Dennis Keirsgieter

Do i understand correctly that if i use 10 components in my project that it's 10 extra dependency's in my package.json?

Collapse
 
phillyvanilly profile image
philly-vanilly • Edited

if you have only one project you can have one, single monorepo and import modules directly without referencing any external NPM lib. Only then you would need to have dependencies in package.json, yes. How many, is up to you, you can also provide barrel modules that import other modules, if all your components (or authentication modules or something else) are imported together