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.
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
- For all
- Clone the repository
- Run
yarn
- Run/Build the Storybook host apps in the following way:
npx nx storybook storybook-host
and
npx nx build-storybook storybook-host
-
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.