@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