Creating a Storybook instance 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…