@nx/storybookSee schema

@nx/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.

1nx g @nx/storybook:configuration 2
Nx uses Storybook 7

Nx does not support Storybook v6 any more. So, Nx will configure your project to use Storybook v7. If you are not on Storybook 7 yet, please migrate. Please follow our Storybook 7 migration generator guide.

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

If you are not using one of the framework-specific generators mentioned above, 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 uiFramework 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 set up Storybook interaction tests (interactionTests). If you choose yes, all the necessary dependencies will be installed. Also, a test-storybook target will be generated in your project's project.json, with a command to invoke the Storybook test-runner. You can read more about this in the Nx Storybook interaction tests documentation page.

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

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

Examples

Generate Storybook configuration using JavaScript

1nx g @nx/storybook:configuration ui --uiFramework=@storybook/web-components-vite --tsConfiguration=false 2

By default, our generator generates TypeScript Storybook configuration files. You can choose to use JavaScript for the Storybook configuration files of your project (the files inside the .storybook directory, eg. .storybook/main.js).

Usage

1nx generate configuration ... 2

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

You can specify the collection explicitly as follows:

1nx g @nx/storybook:configuration ... 2

Show what will be generated without writing to disk:

1nx g configuration ... --dry-run 2

Options

project

Required
string

Project for which to generate Storybook configuration.

uiFramework

Required
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.

tsConfiguration

boolean
Default: true

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

configureStaticServe

boolean
Default: false

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

interactionTests

configureTestRunner
boolean
Default: true

Set up Storybook interaction tests.

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.

skipFormat

Internal
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