DEV Community

Cover image for Nx in Storybook - part 2
Bea Oliveira
Bea Oliveira

Posted on • Edited on

1 2

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:


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 ✌️

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Image of Datadog

Master Mobile Monitoring for iOS Apps

Monitor your app’s health with real-time insights into crash-free rates, start times, and more. Optimize performance and prevent user churn by addressing critical issues like app hangs, and ANRs. Learn how to keep your iOS app running smoothly across all devices by downloading this eBook.

Get The eBook

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay