@nx/storybook:storybook

Serve up Storybook in development mode.

Options can be configured in project.json when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/reference/project-configuration#targets.

project.json:

//...
"ui": {
    "targets": {
        //...
        "storybook": {
            "executor": "@nx/storybook:storybook",
            "options": {
                "port": 4400,
                "configDir": "libs/ui/.storybook"
            },
            "configurations": {
                "ci": {
                    "quiet": true
                }
            }
        },
    }
}

nx run ui:storybook

Examples

For non-Angular projects

You can work in docs mode, building a documentation-only site, by setting the docsMode option to true and using the @storybook/addon-docs addon.

"storybook": {
    "executor": "@nx/storybook:storybook",
    "options": {
        "port": 4400,
        "configDir": "libs/ui/.storybook",
        "docsMode": true
    },
    "configurations": {
        "ci": {
            "quiet": true
        }
    }
}

For Angular projects

This is the default configuration for Angular projects using Storybook. You can see that it uses the native @storybook/angular:start-storybook executor. You can read more about the configuration options at the relevant Storybook documentation page.

"storybook": {
  "executor": "@storybook/angular:start-storybook",
  "options": {
    "port": 4400,
    "configDir": "libs/ui/.storybook",
    "browserTarget": "ui:build",
    "compodoc": false
  },
  "configurations": {
    "ci": {
      "quiet": true
    }
  }
},

Options playground

Try out this interactive editor of the configuration object. Values are validated as you type and hovering over labels will give you more information.

Examples

These buttons show the config object for specific common tasks.

Options

configDir

Required

string

Directory where to load Storybook configurations from.

ci

boolean

Default: false

CI mode (skip interactive prompts, don't open browser).

docs

boolean

Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.

docsMode

boolean

Default: false

Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.

debugWebpack

boolean

Display final webpack configurations for debugging purposes.

disableTelemetry

boolean

Disables Storybook's telemetry.

host

string

Host to listen on.

https

boolean

Default: false

Serve Storybook over HTTPS. Note: You must provide your own certificate information.

loglevel

string

Pattern: (silly|verbose|info|warn|silent)

Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent].

noOpen

boolean

Do not open Storybook automatically in the browser.

open

boolean

Open browser window automatically.

port

number

Default: 9009

Port to listen on.

previewUrl

string

Preview URL.

quiet

boolean

Suppress verbose build output.

sslCa

string

Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate).

sslCert

string

Provide an SSL certificate. (Required with --https).

sslKey

string

Provide an SSL key. (Required with --https).

smokeTest

boolean

Exit after successful start.

webpackStatsJson

boolean ∪ string

Default: false

Write Webpack Stats JSON to disk.

Additional Properties

anything

Extra properties of any type may be provided to this object.

staticDir

Deprecated

Array<string>

Directory where to load static files from, array of strings.

In Storybook 6.4 the --static-dir CLI flag has been replaced with the the staticDirs field in .storybook/main.js. It will be removed completely in Storybook 7.0.

uiFramework

Deprecated

string

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

Storybook framework npm package.

Upgrade to Storybook 7.