Publishing Storybook: One Storybook instance per scope

This guide extends the Using Storybook in a Nx workspace - Best practices guide. In that guide, we discussed the best practices of using Storybook in a Nx workspace. We explained the main concepts and the mental model of how to best set up Storybook. In this guide, we are going to see how to put that into practice, by looking at a real-world example. We are going to see how you can publish one Storybook per scope (eg. theme, app, framework) for your workspace.

Sometimes, you have multiple apps and libraries, and each of these is associated with a specific scope. You can read more about grouping libraries and scoping them in the Library Types documentation page, and also in the Code Organization and Naming Conventions documentation section.

In this case, you can have one Storybook instance per scope. If you follow the folder organization convention described above, it is easy to configure Storybook to import all the stories under a specific folder, for example, which are associated with a specific app or scope.

Example repository/nrwl/nx-recipes/tree/main/storybook-publishing-strategies-single-framework

Structure of the folders

Say, for example, that you have a client app, an admin app, and a number of UI libraries, organized under the name of each app. So you would have a folder structure that looks like this:

1happynrwl/ 2├── apps/ 3│ ├── client/ 4│ ├── admin/ 5├── libs/ 6│ ├── client/ 7│ │ ├── feature/ 8│ │ ├── ui/ 9| │ │ ├── header/ 10| | | | ├── .storybook/ 11| | | | ├── src/ 12| | | | | ├──lib 13| | | | | | ├──my-header 14| | | | | | | ├── my-header.component.ts 15| | | | | | | ├── my-header.component.stories.ts 16| | | | | | | └── etc... 17| | | | | | └── etc... 18| | | | | └── etc... 19| | | | ├── README.md 20| | | | ├── tsconfig.json 21| | | | └── etc... 22│ │ └── utils/ 23│ ├── admin/ 24│ │ ├── feature/ 25│ │ ├── ui/ 26| │ │ ├── dashboard/ 27| | | | ├── .storybook/ 28| | | | ├── src/ 29| | | | | ├── etc.. 30| | | | ├── README.md 31| | | | ├── tsconfig.json 32| | | | └── etc... 33│ │ └── utils/ 34│ └── shared/ 35│ ├── ui/ 36| │ ├── cta/ 37| | | ├── .storybook/ 38| | | ├── src/ 39| | | | ├── etc.. 40| | | ├── README.md 41| | | ├── tsconfig.json 42| | | └── etc... 43│ └── utils/ 44├── tools/ 45├── nx.json 46├── package.json 47└── tsconfig.base.json 48

In this case you can see that we have two deployable applications, client and admin, and we have a number of UI libraries, each associated with a specific app. For example, client-ui-header is a UI library associated with the client app, and admin-ui-dashboard is a UI library associated with the admin app. We also have one more library, the shared-ui-cta library, which is shared between the two apps. The way we have structured our folders is such that any new library that is related to the client app will go in the libs/client folder, and in that folder we have a sub-folder to determine if the new library is related to ui or anything else. The same applies to the admin app. Any library shared between the two apps will live under a subfolder of the libs/shared folder.

Notice how we have already generated Storybook configuration and stories for all of our ui libraries.

Setting up the thematic Storybook instances

Now, we want to have one Storybook instance per thematic scope. This is quite easy to implement since we are following this specific folder structure.

First of all, we need to generate three new libraries (or as many as our "thematic scopes"), which will host all the stories for each specific scope. We can do this following the same steps described above.

It's important to note that if we want to combine stories from different libraries in the same Storybook instance, the stories need to use the same framework.

Let's assume in this case that all our libraries are using Angular.

Generate the libraries

Let's generate three Angular libraries, one for each scope, and let's call them storybook-host-client, storybook-host-admin, and storybook-host-shared. We can do this by running the following commands:

Directory Flag Behavior Changes

The commands below uses the as-provided directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the derived option, omit the --directory flag. See the workspace layout documentation for more details.

❯

nx g @nx/angular:lib storybook-host-client --directory=libs/storybook-host-client --projectNameAndRootFormat=as-provided

Nx 15 and lower use @nrwl/ instead of @nx/

❯

nx g @nx/angular:lib storybook-host-admin --directory=libs/storybook-host-admin --projectNameAndRootFormat=as-provided

Nx 15 and lower use @nrwl/ instead of @nx/

❯

nx g @nx/angular:lib storybook-host-shared --directory=libs/storybook-host-shared --projectNameAndRootFormat=as-provided

Nx 15 and lower use @nrwl/ instead of @nx/

Generate the Storybook configuration for the libraries

Now, we need to generate Storybook configuration for all these new libraries. We don't want to generate stories or a new Cypress project for these libraries, so we can run the following commands:

❯

nx g @nx/storybook:configuration storybook-host-client --uiFramework=@storybook/angular --interactionTests=true

Nx 15 and lower use @nrwl/ instead of @nx/

❯

nx g @nx/storybook:configuration storybook-host-admin --uiFramework=@storybook/angular --interactionTests=true

Nx 15 and lower use @nrwl/ instead of @nx/

❯

nx g @nx/storybook:configuration storybook-host-shared --uiFramework=@storybook/angular --interactionTests=true

Nx 15 and lower use @nrwl/ instead of @nx/

Import the stories

Now that our Storybook configuration is ready for our new libraries, we can go ahead and import the stories!

Thanks to our folder structure, we can easily configure Storybook to import all the stories under a specific folder, for example, which are associated with a specific scope.

For example, libs/storybook-host-admin/.storybook/main.ts:

libs/storybook-host-admin/.storybook/main.ts
1import type { StorybookConfig } from '@storybook/angular'; 2 3const config: StorybookConfig = { 4 stories: ['../../admin/ui/**/src/lib/**/*.stories.ts'], 5 addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], 6 framework: { 7 name: '@storybook/angular', 8 options: {}, 9 }, 10}; 11 12export default config; 13

And don't forget the libs/storybook-host-admin/.storybook/tsconfig.json:

libs/storybook-host-admin/.storybook/tsconfig.json
1{ 2 "extends": "../tsconfig.json", 3 "compilerOptions": { 4 "emitDecoratorMetadata": true 5 }, 6 "exclude": ["../**/*.spec.ts"], 7 "include": ["../../admin/ui/**/src/lib/**/*.stories.ts", "*.ts"] 8} 9

Use cases that apply to this solution

  • Workspaces with multiple apps and libraries, all using a single framework

  • Workspaces that use scopes and follow the suggested folder structure

  • Workspaces that have multiple apps and libs divided by theme and by framework, that do not mind having more than one Storybook

Extras - Dependencies

In this example, you can still use the implicit dependencies to manually tell Nx which projects your new libraries depend on.