@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.
title: Storybook builder executor examples description: This page contains examples for the @nrwl/storybook:build executor.
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
}
}
}