Publishing strategies for Storybook in Single-Framework Nx workspaces

This repository contains a sample Nx workspace that demonstrates how to publish Storybook making the best out of Nx's capabilities.

You can read more in the Nx documentation for Storybook best practices, and more specifically the following guides: Publishing Storybook: One main Storybook instance for all projects and Publishing Storybook: One Storybook instance per scope.

What's inside?

This project contains a number of libraries and applications, all using the same framework. The objective is to showcase how you can publish one single Storybook instance that contains stories from all the different libraries. And also, how you can publish one Storybook instance per scope.

Look into the following files to see how the sample is configured:

• For one Storybook containing all the stories: storybook-host/.storybook/main.ts

• For one Storybook per scope:

  • For all admin components: storybook-host-admin/.storybook/main.ts
  • For all client components: storybook-host-client/.storybook/main.ts
  • For all shared components: storybook-host-shared/.storybook/main.ts

How to run it

1. Clone the repository
2. Run yarn
3. Run/Build the Storybook host apps in the following way:

For one Storybook containing all the stories:

npx nx storybook storybook-host

and

npx nx build-storybook storybook-host

For one Storybook per "scope":

• For all admin components:

  npx nx storybook storybook-host-admin

  and

  npx nx build-storybook storybook-host-admin

• For all client components:

  npx nx storybook storybook-host-client

  and

  npx nx build-storybook storybook-host-client

• For all shared components:

  npx nx storybook storybook-host-shared

  and

  npx nx build-storybook storybook-host-shared

You can then use the Storybook apps that you built to deploy them to a static hosting service.

Learn more

• Nx documentation for Storybook best practices
• Publishing Storybook: One main Storybook instance for all projects
• Publishing Storybook: One Storybook instance per scope
• Set up Storybook on Nx