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

//... "ui": { "targets": { //... "build-storybook": { "executor": "@nrwl/storybook:build", "outputs": ["{options.outputPath}"], "options": { "uiFramework": "@storybook/react", "outputPath": "dist/storybook/ui", "config": { "configFolder": "libs/ui/.storybook" } }, "configurations": { "ci": { "quiet": true } } } }
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.

"build-storybook": { "executor": "@nrwl/storybook:build", "outputs": ["{options.outputPath}"], "options": { "uiFramework": "@storybook/web-components", "outputPath": "dist/storybook/ui", "config": { "configFolder": "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:build-storybook executor. You can read more about the configuration options at the relevant Storybook documentation page.

"build-storybook": { "executor": "@storybook/angular:build-storybook", "outputs": ["{options.outputDir}"], "options": { "outputDir": "dist/storybook/ngapp", "configDir": "libs/ui/.storybook", "browserTarget": "ui:build", "compodoc": false }, "configurations": { "ci": { "quiet": true } } }

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.