@nrwl/storybookSee schema

@nrwl/storybook:configuration

Add Storybook configuration to a UI library or an application.

This is a framework-agnostic generator for setting up Storybook configuration for a project.

nx g @nrwl/storybook:configuration

Nx will understand if you're using Storybook v7 or Storybook v6 and configure your project accordingly. By default, it will try to use Storybook v7.

When running this generator, you will be prompted to provide the following:

  • The name of the project you want to generate the configuration for.
  • The storybook7UiFramework you want to use. Supported values are:
    • @storybook/angular
    • @storybook/html-webpack5
    • @storybook/nextjs
    • @storybook/preact-webpack5
    • @storybook/react-webpack5
    • @storybook/react-vite
    • @storybook/server-webpack5
    • @storybook/svelte-webpack5
    • @storybook/svelte-vite
    • @storybook/sveltekit
    • @storybook/vue-webpack5
    • @storybook/vue-vite
    • @storybook/vue3-webpack5
    • @storybook/vue3-vite
    • @storybook/web-components-webpack5
    • @storybook/web-components-vite
  • Whether you want to configureCypress. If you choose yes, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance.
  • Whether you want to configureTestRunner. If you choose yes, a test-storybook target will be generated in your project's project.json, with a command to invoke the Storybook test-runner.

You must provide a name and a storybook7UiFramework for the generator to work.

You can read more about how this generator works, in the Storybook package overview page.

If you are using Angular, React, React Native or Next.js in your project, it's best to use the framework specific generator:

Examples

Generate Storybook configuration using TypeScript

nx g @nrwl/storybook:configuration ui --storybook7UiFramework=@storybook/web-components-vite --tsConfiguration=true

This will generate a Storybook configuration for the ui project using TypeScript for the Storybook configuration files (the files inside the .storybook directory).

Generate Storybook configuration for Storybook version 6

If, for somem reason, you want to force Nx to generate Storybook version 6 configuration, you can do so by passing false to the storybook7Configuration flag:

nx g @nrwl/storybook:configuration ui --uiFramework=@storybook/react --storybook7Configuration=false

However, this is NOT recommended.

Usage

nx generate configuration ...

By default, Nx will search for configuration in the default collection provisioned in workspace.json.

You can specify the collection explicitly as follows:

nx g @nrwl/storybook:configuration ...

Show what will be generated without writing to disk:

nx g configuration ... --dry-run

Options

name

Required
string

Project for which to generate Storybook configuration.

bundler

string
Default: webpack
Accepted values: vite, webpack

The Storybook builder to use.

configureCypress

boolean

Run the cypress-configure generator.

storybook7UiFramework

string
Accepted values: @storybook/angular, @storybook/html-webpack5, @storybook/nextjs, @storybook/preact-webpack5, @storybook/react-webpack5, @storybook/react-vite, @storybook/server-webpack5, @storybook/svelte-webpack5, @storybook/svelte-vite, @storybook/sveltekit, @storybook/vue-webpack5, @storybook/vue-vite, @storybook/vue3-webpack5, @storybook/vue3-vite, @storybook/web-components-webpack5, @storybook/web-components-vite

Storybook UI Framework to use, for Storybook version 7.

tsConfiguration

boolean
Default: false

Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.

cypressDirectory

string

A directory where the Cypress project will be placed. Added at root by default.

configureStaticServe

boolean
Default: false

Add a static-storybook to serve the static storybook built files.

configureTestRunner

boolean

Add a Storybook Test-Runner target.

js

boolean
Default: false

Generate JavaScript story files rather than TypeScript story files.

linter

string
Default: eslint
Accepted values: eslint, none

The tool to use for running lint checks.

storybook7Configuration

Hidden
boolean
Default: true

Configure your workspace using Storybook version 7. Defaults to true.

uiFramework

string
Accepted values: @storybook/angular, @storybook/react, @storybook/react-native, @storybook/html, @storybook/web-components, @storybook/vue, @storybook/vue3, @storybook/svelte

Storybook UI Framework to use.

skipFormat

boolean
Default: false

Skip formatting files.

standaloneConfig

Deprecated
boolean
Default: true

Split the project configuration into <projectRoot>/project.json rather than including it inside workspace.json.

Nx only supports standaloneConfig