Creating a Storybook instance including stories from multiple libraries in a Nrwl Nx workspace
Learn how to create a Storybook including stories from multiple libraries in a Nrwl Nx workspace
Here’s a really short article about a cool trick that I’ve learned by reading a discussion on the Nx support slack channel.
In a Nrwl Nx workspace, when you add Storybook support, what you get by default is a separate instance of Storybook for each feature library.
This is nice as it allows to quickly spin up a Storybook instance, loaded with only a subset of the stories related to a specific feature/group of features. Main benefit: focus, startup time → perfect for development and e2e testing.
In some cases though, you might also want to be able to see stories from multiple or even all of your libraries, together in a single Storybook instance.
Juri Strumpflohner has shared the simple recipe on Github; here’s how it works!
TLDR;
If you know how all of this works, then simply follow these steps:
- Create a shared library with normal Nx Storybook support (i.e., library with a .storybook folder, angular.json configuration with a “storybook” and “build-storybook” target
- Modify the config.js file under
libs/<your new library>/.storybook)to replace theconfigure(...)line withconfigure(require.context(“../../”, true, /\.stories\.tsx?$/), module);
Run storybook against your library and enjoy.
The (slightly) longer version
As I’ve explained in one of my previous articles, when Storybook is added in n Nx workspace through the Nx CLI, Nx adds a “.storybook” folder at the root of the workspace, but also within each library that is configured for Storybook.
Inside of the .storybook folder of each library, there’s a config.js file which can be used to customize the configuration of Storybook for a specific library.
The default configuration instructs Storybook to load all “.stories.ts(x)” files in the current library; it looks as follows:
import { configure } from '@storybook/angular';
configure(require.context('../src/lib', true, /\.stories\.tsx?$/), module);
As you can see, it only looks for stories within the library’s src/lib folder.
So finding and loading libraries from other libraries is actually as simple as changing the above require.context path to look for Stories in the whole “libs” folder (and most certainly works just as well for React apps).
Of course you don’t want to do this on one of your existing libraries; it’s preferable to create a dedicated library for this. In his example, Juri has created a dedicated library called “storybook” under “libs/shared”.
By the way, note that you can use a different port for this Storybook instance by adapting your angular.json file.
Conclusion
This was a really short piece, but I found it quite nice and interesting to write a few words about it. Thanks to Juri for sharing the idea! ;-)
If you’re also diving into Storybook, Nx (and/or Angular), then don’t hesitate to look at my other articles on the subject.
That's it for today! ✨
About Sébastien
I am Sébastien Dubois. You can follow me on X 🐦 and on BlueSky 🦋.
I am an author, founder, and coach. I write books and articles about Knowledge Work, Personal Knowledge Management, Note-taking, Lifelong Learning, Personal Organization, and Zen Productivity. I also craft lovely digital products . You can learn more about my projects here.
If you want to follow my work, then become a member.
Ready to get to the next level?
To embark on your Knowledge Management journey, consider investing in resources that will equip you with the tools and strategies you need. Check out the Obsidian Starter Kit and the accompanying video course. It will give you a rock-solid starting point for your note-taking and Knowledge Management efforts.
If you want to take a more holistic approach, then the Knowledge Worker Kit is for you. It covers PKM, but expands into productivity, personal organization, project/task management, and more:
If you are in a hurry, then do not hesitate to book a coaching session with me:
