@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.outputDir}"], "options": { "uiFramework": "@storybook/react", "outputDir": "dist/storybook/ui", "configDir": "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.outputDir}"], "options": { "uiFramework": "@storybook/web-components", "outputDir": "dist/storybook/ui", "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: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

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.

docsMode

boolean
Default: false

Build a documentation-only site using addon-docs.

docs

boolean

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

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

outputDir

string

Directory where to store built files.

quiet

boolean

Suppress verbose build output.

styles

Array<oneOf [object , string]>

Global styles to be included in the build.

stylePreprocessorOptions

Options to pass to style preprocessors.

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.

Additional Properties

anything

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