Gatsby: How to use resusable components for another project?

Created on 4 Jan 2019 · 9Comments · Source: gatsbyjs/gatsby

Hi,

I actually have a project named X with many components in the directory:
/Sites/X/src/components/...with /Sites/X/node_modules.

I have to create another project named Y and I would like to use same components instead of rewriting them.

The project is at /Sites/Y/src/ with /Sites/node_modules.

Is there a way to share these reusable component?

Thanks

question or discussion

Source

Steffi3rd

All 9 comments

Hello,
How about moving those components in a library and deploy them as npm module? Then you can simply npm install <library> and use them in any project.

gurpreet-hanjra on 4 Jan 2019

👍1

Hello,
How about moving those components in a library and deploy them as npm module? Then you can simply npm install <library> and use them in any project.

Sounds interesting, but what library? Can you develop please?

Steffi3rd on 4 Jan 2019

Worth looking at https://bitsrc.io/

trickydisco78 on 4 Jan 2019

Hello @Steffi3rd

Typically the way to do this is to create a new repository called, say Steffi3rd components and publish this to npm. Then in projects X and Y, you can import Steffi3rd components and use them as you regularly would.

Here's a quick walk through that I found on Medium

https://medium.com/quick-code/publish-your-own-react-component-as-npm-package-under-5-minutes-8a47f0cb92b9

sidharthachatterjee on 4 Jan 2019

👍1

:+1: for Bit that @trickydisco78 mentioned. It's like Github for components with nice goodies.

ghost on 4 Jan 2019

Hello,
How about moving those components in a library and deploy them as npm module? Then you can simply npm install <library> and use them in any project.

Sounds interesting, but what library? Can you develop please?

Couldn't described better than @sidharthachatterjee . This is what I meant.

gurpreet-hanjra on 4 Jan 2019

Okay guys, thanks for all those answers.

If we published on npm, anyone can use them, right?

So the component must be contain any "personnal" state/data, right ?

Steffi3rd on 5 Jan 2019

You could use private packages that start at $7/month on npm or for free at Bit (scopes). Note that Bit works with npm too.

But I think you should use environment variables and/or a headless CMS to store sensible information.

ghost on 5 Jan 2019

Closing this for now @Steffi3rd

Please feel free to reopen if there is anything else we can help with!

sidharthachatterjee on 7 Jan 2019