Nx in Storybook - part 2

Hi there! 🖐🏻

So, the day came in which we did a big refactor on our monorepo. We were expanding the number of projects that were going to be supported in our nx project and that called for a restructuring of the libs and dependencies to assure performance and coherence. As we started refactoring the libs we realized that was impractical to launch storybook for each one of the libraries, which was going to kill the whole point of having it on our project.

I wrote a few months ago a post on how to install storybook on a nx project and if you didn't catch that first part, you can check it here:

Using storybook in an Nx monorepo

Bea Oliveira ・ Oct 26 ・ 3 min read

#components #monorepos #storybook

In this one I share on how to install storybook with nx and the main thing is that you will have to add a config for storybook on root level and on each lib. And then you run it per lib (npm run storybook:mylib).

Now, I learned a way to actually be able to run all the stories inside the project at once. I think it can be a nice addition to those working with this.

I got this idea from this video 💪👏

1: Steps to fix the problem and my experience implementing it:

1. In the shared library create an upper-level lib using the create lib command for nx
2. Install storybook inside the library

3. In config.js file change the path to the where the stories should be watched

   • Replace:

   configure(require.context('../src/lib', true,/\.stories\.tsx?$/), module);
   

• With something like this:

configure(require.context('../..', true, /\.stories\.tsx?$/), module);

Do you see it? That first part in context call back you should adjust to a higher level path, so it will take all the stories, even the ones in deeper libs.

Last thing: run your new lib. And, there you go, it's ready! 🚀

Hope it helps, peeps!

Happy coding, everyone ✌️