Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
This guide will briefly walk you through using Storybook within an Nx workspace.
Setting Up Storybook
Add the Storybook plugin
yarn add --dev @nrwl/storybook
Generating Storybook Configuration
You can generate Storybook configuration for an individual project with this command:
nx g @nrwl/react:storybook-configuration project-name
Serve Storybook using this command:
nx run project-name:storybook
You can find dedicated information for React and Angular:
For more on using Storybook, see the official Storybook documentation.
Here's more information on common migration scenarios for Storybook with Nx. For Storybook specific migrations that are not automatically handled by Nx please refer to the official Storybook page
Here is a list of all the executors and generators available from this package.
Add Storybook configuration to the workspace.
Add Storybook configuration to a UI library or an application.
Add cypress e2e app to test a UI library that is set up for Storybook.
Change storybook targets for Angular projects to use @storybook/angular executors