Storybook: How to import the Storybook components into a new React project

[pauldcollins]

I've built a component library using React and Storybook and now I'd like to import and use the components in a separate React project.

I'm having trouble finding any good tutorials on how to do this - perhaps I'm entering the wrong terms. I understand you could use Yarn, or even create an npm module, but I can't find specifics. There maybe even better ways?

Could anyone send me links on how to import the React Storybook component library I've built into a new React project? Would greatly appreciate your help.

[Hypnosphi]

Well, there’s no such thing as “react storybook” component library. Storybook is a development and testing tool and should not affect how your components are used. So basically you just have s React component library and use Storybook in its development.

That said, I can give you some advices, but this highly depends on specifics of your projects. Is your component library open sourced? If it is, can I take a look at the repo?

[pauldcollins]

Hi @Hypnosphi

Thanks for your quick reply and for tagging the question correctly. I do understand what you're saying, that Storybook is just a tool that I'm using within Create React App. I guess this is why I'm having trouble finding documentation :)

My project isn't open source, unfortunately. Very good question though. Do you have any resources/links for private repositories?

Thanks again for your help.
Cheers
Paul

[marchdoe]

@pauldcollins - I had a similar issue when I was building something, so I recently spun up a project to try and help solve it. It is super early and not ready at all. However, I share it because eventually, the goal is to solve the exact questions you have.

https://github.com/marchdoe/cl

[ndelangen]

@pauldcollins Are you trying to have storybook & components in a different repository from your app? If not, I'm not sure I understand what the problem is?

This is what I do:

$ tree
.
├── .storybook
│   ├── webpack.config.js
│   └── config.js
├── app
│   ├── webpack.config.js
│   ├── ...
│   └── ...
├── components
│   ├── myComponentNr1
│   │   ├── myComponentNr1.js
│   │   ├── myComponentNr1.spec.js
│   │   ├── myComponentNr1.story.js
│   │   └── ...
│   ├── ...
│   └── ...
├── .babelrc
├── .eslintrc.js
└── README.md

Storybook and the app are on the same level, and both look to the same components.

In fact I've even done this:

$ tree
.
├── .storybook
│   ├── webpack.config.js
│   └── config.js
├── app1
│   ├── webpack.config.js
│   ├── ...
│   └── ...
├── app2
│   ├── webpack.config.js
│   ├── ...
│   └── ...
├── components
│   ├── myComponentNr1
│   │   ├── myComponentNr1.js
│   │   ├── myComponentNr1.spec.js
│   │   ├── myComponentNr1.story.js
│   │   └── ...
│   ├── ...
│   └── ...
├── .babelrc
├── .eslintrc.js
└── README.md

And deploy multiple apps using the same components (developed in storybook) from 1 repository.

If you hate relative paths, you can configure webpack to resolve using alias or multiple modulePaths. Though I usually do not bother since it complicates things and creates a strong dependence on webpack.

I hope this helps you.

[ndelangen]

If you really want to develop components in a different repository for some reason, You could publish the package with all components as a npm module.

Or you could use github links as npm dependency: https://docs.npmjs.com/files/package.json#dependencies

[Hypnosphi]

Does you company have its own private npm registry? You probably want to publish your package there instead of global npm

[pauldcollins]

Thanks everyone for coming to offer advice, I greatly appreciate it.

@marchdoe - your project looks great, thanks for sharing, I am now watching 👍

@ndelangen - That would be a great solution, but we are likely to spin a number of projects off this component library, some might need different versions and we might also end up making it public one day, so I think we need to keep it separate.

@Hypnosphi Yes, I think they do have a private registry. So... I guess I need to find resources on publishing a component library as an NPM package? I saw a short tutorial on YARN, but needed more information.

Thanks again everyone - @Hypnosphi, if you have any suggested resources for publishing a component library to NPM, I'd really appreciate the help.

Cheers!

[Hypnosphi]

Here are docs for publishing packages on npm: https://docs.npmjs.com/cli/publish

If you're going to use the same webpack and babel settings across your projects, this should be enough. Otherwise, you probably will want to precompile your components before publishing. Do you import something other than javascript in your components?

[pauldcollins]

Thanks @Hypnosphi, appreciate the help. The project settings will be the same, so it should be fine.

Hi @ndelangen - just one question on the single repository structure, I've looked into requirements and this could be an option - but do you have any way of versioning your components if they're in the same repo?

I'm just thinking of a scenario where you update a shared component for 'app-2', but you don't want 'app-1' to get the changes until later. With NPM you can version, just wondering if it's possible in the same repo?

Thanks again.

[ndelangen]

@pauldcollins NO you will not be able to version a component and that is both a curse and a blessing.
You will be forced to keep your apps on the bleeding edge.
On the other hand this can make a small change slightly more complex, but will likely make your codebase much easier to understand.

If you extract the components into their own package, do not underestimate the time you'll spend publishing little patches on the many packages you now are maintaining. I feel staying on the bleeding edge of all your internally developed components is likely to be more productive.

but it really depends on your app, complexity and team.

[pauldcollins]

Hi @ndelangen

Thanks for your explanation. I was having a hard time weighing up the concerns and you've helped me decide to keep everything in the same repository. I think the trade offs are worth it and a separate package might make it overly complex, for the size of the current project.

Thanks again for all your advice, and for Storybook! All the best.

[pauldcollins]

Hi @ndelangen I just had one further question on your project structure above as I dive in - using the one repo.

Are you installing a new build of create-react-app in each folder? Just wondering what it would look like in practice - can you run apps from different folders at the same time?

Thanks again.

[ndelangen]

can you run apps from different folders at the same time?

Sure you can! as long, as you give them different ports.

[pauldcollins]

Thanks @ndelangen, that makes sense !!

[pauldcollins]

Hi @ndelangen, I am currently setting up my first app, based on your recommended structure above: all within the same repo. I've installed a new version of create-react-app inside a sub folder, that sits alongside components at the same folder level.

When trying to import from the components folder into my new app, I get an error saying I can't import anything outside of the src folder of my create-react-app install. I'm just wondering how you work around this - do you need to eject and remove ModuleScopePlugin, as this post suggests?

Or have you found a way to do it without ejecting?

Thanks again!

[pauldcollins]

Hi @ndelangen, sorry to trouble you again.

I've been trying to get this setup to work for a number of days now and can't seem to make it happen.

Basically, if I install a new version of Create React App, there are all kinds of issues with importing component files from outside the src folder and using a linter if I eject. So I can't get the storybook files in from a sibling folder to my app root directory.

I was just wondering, are you using CRA for each of your app builds, or are you creating custom webpack install? If you have any further info, links etc setting this up, I would greatly appreciate it!

Thanks again
Paul

[texttechne]

If you use different CRA's then you need something like symbolic links, a feature supported by plain npm / yarn, to circumvent the problems you've mentioned. You could also take the mono repo approach from lerna, which also makes use of symbolic links.

In either case you would end up with having a dependency on your storybook components from your apps with the effect that they would be available in your node_modules folder as regular dependency. If your setup is the same (component library and CRA's) then you should be able to include your components in your app. If this doesn't work (as is the case with using typescript), then you need to compile your storybook component lib and use the compiled components as dependencies.

[pauldcollins]

Hi @texttechne thanks very much for your reply.

Does this mean I would need to publish an NPM package in order for the project to work? I imagine once someone else downloads it, they won't have the npm-link setup, so it wouldn't work for them. Would this also affect it going live?

Thanks for your help

[texttechne]

The npm link stuff is only for development. For production you publish to a private or public repo and then it becomes easy: Your component lib becomes a plain npm dependency.

For private repos take a look at: Nexus (quite powerful repo manager for Java, Docker, NPM, ...) or Sinopia (much easier to setup).

[pauldcollins]

Thanks for your quick reply @texttechne

It sounds like an NPM package is really the best way to go, maybe the only way, after spending the last four days on this! I thought the "all in the one repo" option would be quicker!!

Thanks for your help and advice, much appreciated.