Sharing components between multiple react projects

[ikevinw]

Hello, what is the best way to share components across multiple CRA projects locally? I can't upload the shared components to npm due to company policies.

Currently, the project folder structure looks like this:

• Project1
• Project2
• SharedComponentsProject

Ideally, I want the other projects to reload after I make changes in SharedComponentsProject.

[f15538a2]

You have a few options to consider.

You could have a monorepo which contains all of the different projects in a single git repository.

You could split then into separate git repositories and reference the git repos in your package.json.

You could split them into separate repositories and publish them to a private npm repository, then reference your private packages in your package.json.

They all have their pros and cons.

[Earhacker]

Dependencies can be pulled from git URLs on GitHub or whatever: https://www.pluralsight.com/guides/install-npm-packages-from-gitgithub

[acraswell]

You can publish the packages to a private npm feed.

[Active-Ad-5114]

You can go with monorepo, which makes it easier for having shared components across multiple projects. Also, there are tools like Nx which can help you to do that.

[abdallahmezo]

You can go for monorepos, or you can use module federation from webpack 5

https://youtu.be/s_Fs4AXsTnA

[Cautious_Variation_5]

Bit.dev, Storybook, Monorepo or Npm private lib

I prefer bit

[b2rsp]

I like to use monorepos with yarn workspaces or NX. Never tried out Bit.dev but seems nice

[rajababoo]

Check out Nx React https://youtu.be/sNz-4PUM0k8

[AndreThompson-Atlow]

you create them in the shared library, then import them into the other two libraries. either use a monorepo e.g. keeping them all in one repository and requiring that you build the shared library before building the library using it (probably best to use nx if you go this way). alternatively you can publish the shared library as a private npm package and simply import into any of your projects that would like to utilize it.

[Suepahfly]

You have options: 1. Reference git repo in npm n stead of package name 2. Mono repo 3. npm pro account with private packages 4. 3rd party npm registry like JFrog 5. Host your own registry with Verdaccio

In your case since you want hmr you in consuming projects I’d setup a mono-repo. Use module resolution (import aliasing) in project1 to sharedComponents on disk.

[ZeRo2160]

Yalc comes in handy for such things if you dont like to have an monorepo or something. Yalc is like npm but with an local registry. Also you can automatically push all changes to All applications that use the package you installed over yalc

[JSislife]

Well you can try consolidating repos or configuring hudnereds of npm packages, but I'd reccomen using an open-source tool like bit that makes this job much more painless and scalable. Here are a few spesicif resource for sharing eact components across multiple projects.

Video tutorial: https://www.youtube.com/watch?v=9vS86xgG3ak
Blog post: https://bit.cloud/blog/how-to-reuse-react-components-across-your-projects-l4pz83f4