@nx/storybook

What is @nx/storybook?

@nx/storybook is an npm package that integrates Storybook with the Nx build system. It allows you to efficiently manage and develop UI components in isolation, providing a seamless experience for building, testing, and documenting components within an Nx workspace.

What are @nx/storybook's main functionalities?

Setup Storybook for an Nx Workspace

This command sets up Storybook for a specific application within an Nx workspace. It configures the necessary files and dependencies to get Storybook up and running.

npx nx g @nx/storybook:configuration my-app

Generate Stories for Components

This command generates Storybook stories for all components in a specified library. It helps in quickly creating stories for existing components, making them available for isolated development and testing.

npx nx g @nx/storybook:stories my-lib

Run Storybook

This command starts the Storybook server for a specific application, allowing you to view and interact with your components in an isolated environment.

npx nx run my-app:storybook

Build Storybook

This command builds the static Storybook site for a specific application, which can then be deployed to a static site hosting service.

npx nx run my-app:build-storybook

Other packages similar to @nx/storybook

storybook

Storybook is the core package for building UI components in isolation. It provides a powerful interface for developing, testing, and documenting components. While @nx/storybook integrates Storybook with Nx, the core Storybook package can be used independently or with other build systems.

@storybook/react

@storybook/react is a Storybook addon specifically for React components. It offers similar functionalities to @nx/storybook but is tailored for React projects. It does not provide the same level of integration with the Nx build system.

@storybook/angular

@storybook/angular is a Storybook addon for Angular components. Like @storybook/react, it offers functionalities for developing and testing Angular components in isolation but lacks the Nx-specific integrations provided by @nx/storybook.

@storybook/vue

@storybook/vue is a Storybook addon for Vue components. It provides similar functionalities for Vue projects, allowing developers to build and test Vue components in isolation. However, it does not integrate with the Nx build system like @nx/storybook.

README

---

Nx: Smart Monorepos · Fast CI

Nx is a build system, optimized for monorepos, with plugins for popular frameworks and tools and advanced CI capabilities including caching and distribution.

This package is a Storybook plugin for Nx.

Getting Started

Creating an Nx Workspace

Using npx

npx create-nx-workspace

Using npm init

npm init nx-workspace

Using yarn create

yarn create nx-workspace

Adding Nx to an Existing Repository

Run:

npx nx@latest init

Documentation & Resources

• Nx.Dev: Documentation, Guides, Tutorials
• Intro to Nx
• Official Nx YouTube Channel
• Blog Posts About Nx