@nrwl/storybook:build

Build storybook in production 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        "build-storybook": {
6            "executor": "@nrwl/storybook:build",
7            "outputs": ["{options.outputPath}"],
8            "options": {
9                "uiFramework": "@storybook/react",
10                "outputPath": "dist/storybook/ui",
11                "config": {
12                    "configFolder": "libs/ui/.storybook"
13                }
14            },
15            "configurations": {
16                "ci": {
17                    "quiet": true
18                }
19            }
20        }
21}
22
nx run ui:build-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"build-storybook": {
2    "executor": "@nrwl/storybook:build",
3    "outputs": ["{options.outputPath}"],
4    "options": {
5        "uiFramework": "@storybook/web-components",
6        "outputPath": "dist/storybook/ui",
7        "config": {
8            "configFolder": "libs/ui/.storybook"
9        }
10    },
11    "configurations": {
12        "ci": {
13            "quiet": true
14        }
15    }
16}
17

For Angular projects

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

1"build-storybook": {
2  "executor": "@storybook/angular:build-storybook",
3  "outputs": ["{options.outputDir}"],
4  "options": {
5    "outputDir": "dist/storybook/ngapp",
6    "configDir": "libs/ui/.storybook",
7    "browserTarget": "ui:build",
8    "compodoc": false
9  },
10  "configurations": {
11    "ci": {
12      "quiet": true
13    }
14  }
15}
16

Options

config

Required

.storybook file configuration

docsMode

boolean
Default: false

Build a documentation-only site using addon-docs.

outputPath

string

The output path of the generated files.

quiet

boolean
Default: true

Suppress verbose build output.

styles

Array<oneOf [object , string]>

Global styles to be included in the build.

stylePreprocessorOptions

Options to pass to style preprocessors.

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.