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


title: Storybook dev server executor examples description: This page contains examples for the @nrwl/storybook:storybook executor.


project.json:

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

Examples

For non-Angular projects

You can change the uiFramework option, to correspond to the framework you are using for your project. Supported values are: "@storybook/react", "@storybook/html", "@storybook/web-components", "@storybook/vue", "@storybook/vue3" and "@storybook/svelte". If you are using Angular, please check out the Angular-specific Storybook executor.

"storybook": { "executor": "@nrwl/storybook:storybook", "options": { "uiFramework": "@storybook/web-components", "port": 4400, "configDir": "libs/ui/.storybook" }, "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

configDir

Required
string

Directory where to load Storybook configurations from.

uiFramework

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

Storybook framework npm package.

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.

host

string
Default: localhost

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

open

boolean

Open browser window automatically.

port

number
Default: 9009

Port to listen on.

previewUrl

string

Preview URL.

quiet

boolean

Suppress verbose build output.

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.