Rescope @nrwl to @nx
@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.

nx g @nx/storybook:configuration
Nx 15 and lower use @nrwl/ instead of @nx/

Starting Nx 16, 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. You can read more about how to migrate to Storybook 7 in our Storybook 7 migration generator guide.

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.

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 JavaScript

nx g @nx/storybook:configuration ui --uiFramework=@storybook/web-components-vite --tsConfiguration=false
Nx 15 and lower use @nrwl/ instead of @nx/

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

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 @nx/storybook:configuration ...
Nx 15 and lower use @nrwl/ instead of @nx/

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.

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.

bundler

string
Default: webpack
Accepted values: vite, webpack

The Storybook builder 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

boolean
Default: false

Skip formatting files.

configureCypress

Deprecated
boolean

Run the cypress-configure generator.

Use interactionTests instead. This option will be removed in v18.

cypressDirectory

Deprecated
string

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

Use interactionTests instead. This option will be removed in v18.

standaloneConfig

Deprecated
boolean
Default: true

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

Nx only supports standaloneConfig