@nrwl/storybookSee schema

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

project.json:

1//...
2"ui": {
3    "targets": {
4        //...
5        "storybook": {
6            "executor": "@nrwl/storybook:storybook",
7            "options": {
8                "uiFramework": "@storybook/react",
9                "port": 4400,
10                "config": {
11                    "configFolder": "libs/ui/.storybook"
12                }
13            },
14            "configurations": {
15                "ci": {
16                    "quiet": true
17                }
18            }
19        },
20    }
21}
22
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.

1"storybook": {
2    "executor": "@nrwl/storybook:storybook",
3    "options": {
4        "uiFramework": "@storybook/web-components",
5        "port": 4400,
6        "config": {
7            "configFolder": "libs/ui/.storybook"
8        }
9    },
10    "configurations": {
11        "ci": {
12            "quiet": true
13        }
14    }
15}
16

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.

1"storybook": {
2  "executor": "@storybook/angular:start-storybook",
3  "options": {
4    "port": 4400,
5    "configDir": "libs/ui/.storybook",
6    "browserTarget": "ui:build",
7    "compodoc": false
8  },
9  "configurations": {
10    "ci": {
11      "quiet": true
12    }
13  }
14},
15

Options

config

Required
config

.storybook configuration.

docsMode

boolean
Default: false

Build a documentation-only site using addon-docs.

host

string
Default: localhost

Host to listen on.

https

boolean
Default: false

Serve using HTTPS.

port

number
Default: 9009

Port to listen on.

quiet

boolean
Default: true

Suppress verbose build output.

sslKey

string

SSL key to use for serving HTTPS.

sslCert

string

SSL certificate to use for serving HTTPS.

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

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

Storybook framework npm package.

watch

boolean
Default: true

Watches for changes and rebuilds application.