Storybook Inferred Targets
In Nx version 17.3, the @nx/storybook plugin can create inferred tasks for projects that have a Storybook configuration file present. This means you can run nx storybook my-project, nx build-storybook my-project, nx test-storybook my-project and nx static-storybook my-project for that project, even if there is no storybook, build-storybook, test-storybook or static-storybook targets defined in package.json or project.json.
Setup
To enable inferred targets, add @nx/storybook/plugin to the plugins array in nx.json.
1{
2 "plugins": [
3 {
4 "plugin": "@nx/storybook/plugin",
5 "options": {
6 "buildStorybookTargetName": "build-storybook",
7 "serveStorybookTargetName": "storybook",
8 "testStorybookTargetName": "test-storybook",
9 "staticStorybookTargetName": "static-storybook"
10 }
11 }
12 ]
13}
14Target Inference Process
Identify Valid Projects
The @nx/storybook/plugin plugin will create a target for any project that has a Storybook configuration file present. Any of the following files will be recognized as a Storybook configuration file:
.storybook/main.js.storybook/main.ts.storybook/main.cjs.storybook/main.cts.storybook/main.mjs.storybook/main.mts
Name the Inferred Target
Once a Storybook configuration file has been identified, the targets are created with the name you specify under buildStorybookTargetName, serveStorybookTargetName, testStorybookTargetName or staticStorybookTargetName in the nx.json plugins array. The default names for the inferred targets are storybook, build-storybook, test-storybook and static-storybook.
Set Inferred Options
The @nx/storybook/plugin plugin will start with any targetDefaults you have set in nx.json, and then apply the following properties:
For non-Angular Storybook projects
For build-storybook
| Property | Sample Value | Description |
|---|---|---|
command | storybook build | Build Storybook for the project |
cache | true | Automatically cache the task |
inputs | production | Break the cache if non-test files in the project change |
inputs | { externalDependencies: [ "storybook", "@storybook/test-runner" ] } | Break the cache if the version of the storybook package or the @storybook/test-runner changes |
outputs | ["{workspaceRoot}/dist/storybook/{projectRoot}"] | The output directory of the build. The output path is static and cannot be configured at the moment. This may change in the future. |
For storybook
| Property | Sample Value | Description |
|---|---|---|
command | storybook dev | Serve Storybook for the project |
For test-storybook
| Property | Sample Value | Description |
|---|---|---|
command | test-storybook | Run interaction tests for Storybook |
inputs | { externalDependencies: [ "storybook", "@storybook/test-runner" ] } | Break the cache if the version of the storybook package or the @storybook/test-runner changes |
For Angular Storybook projects
For build-storybook
| Property | Sample Value | Description |
|---|---|---|
executor | "@storybook/angular:build-storybook | Build Storybook for the project |
cache | true | Automatically cache the task |
inputs | production | Break the cache if non-test files in the project change |
inputs | { externalDependencies: [ "storybook", "@storybook/angular", "@storybook/test-runner" ] } | Break the cache if the version of the storybook package, or the @storybook/angular package or the @storybook/test-runner package changes |
outputs | ["{workspaceRoot}/dist/storybook/{projectRoot}"] | The output directory of the build. The output path is static and cannot be configured at the moment. This may change in the future. |
For storybook
| Property | Sample Value | Description |
|---|---|---|
executor | @storybook/angular:start-storybook | Serve Storybook for the project |
For test-storybook
| Property | Sample Value | Description |
|---|---|---|
command | test-storybook | Run interaction tests for Storybook |
inputs | { externalDependencies: [ "storybook", "@storybook/test-runner" ] } | Break the cache if the version of the storybook package or the @storybook/test-runner changes |
Debug Inferred Targets
To view the final output of an inferred target you can use the nx show project my-project command or use Nx Console. The result should look something like this:
For non-Angular Storybook projects
1{
2 "targets": {
3 "build-storybook": {
4 "cache": true,
5 "inputs": [
6 "production",
7 "^production",
8 { "externalDependencies": ["storybook", "@storybook/test-runner"] }
9 ],
10 "outputs": ["{workspaceRoot}/dist/storybook/{projectRoot}"],
11 "executor": "nx:run-commands",
12 "options": {
13 "command": "storybook build --config-dir my-project/.storybook --output-dir dist/storybook/my-project"
14 },
15 "configurations": {}
16 },
17 "storybook": {
18 "executor": "nx:run-commands",
19 "options": {
20 "command": "storybook dev --config-dir my-project/.storybook"
21 },
22 "configurations": {}
23 },
24 "test-storybook": {
25 "inputs": [
26 { "externalDependencies": ["storybook", "@storybook/test-runner"] }
27 ],
28 "executor": "nx:run-commands",
29 "options": {
30 "command": "test-storybook --config-dir my-project/.storybook"
31 },
32 "configurations": {}
33 },
34 "static-storybook": {
35 "executor": "@nx/web:file-server",
36 "options": {
37 "buildTarget": "build-storybook",
38 "staticFilePath": "dist/storybook/my-project"
39 },
40 "configurations": {}
41 }
42 }
43}
44You can also use the nx show project my-project command with the --json false flag to see a concise output of the inferred targets:
1Name: my-project
2Root: my-project
3Source Root: my-project/src
4Tags:
5Implicit Dependencies:
6Targets:
7- build-storybook: nx:run-commands
8- storybook: nx:run-commands
9- test-storybook: nx:run-commands
10- static-storybook: @nx/web:file-server
11For Storybook Angular projects
1{
2 "targets": {
3 "build-storybook": {
4 "cache": true,
5 "inputs": [
6 "production",
7 "^production",
8 {
9 "externalDependencies": [
10 "storybook",
11 "@storybook/angular",
12 "@storybook/test-runner"
13 ]
14 }
15 ],
16 "executor": "@storybook/angular:build-storybook",
17 "options": {
18 "outputDir": "dist/storybook/my-project",
19 "configDir": "my-project/.storybook",
20 "browserTarget": "my-project:build-storybook",
21 "compodoc": false
22 },
23 "outputs": ["{workspaceRoot}/dist/storybook/{projectRoot}"],
24 "configurations": {}
25 },
26 "storybook": {
27 "executor": "@storybook/angular:start-storybook",
28 "options": {
29 "configDir": "my-project/.storybook",
30 "browserTarget": "my-project:build-storybook",
31 "compodoc": false
32 },
33 "inputs": [
34 {
35 "externalDependencies": [
36 "storybook",
37 "@storybook/angular",
38 "@storybook/test-runner"
39 ]
40 }
41 ],
42 "configurations": {}
43 },
44 "test-storybook": {
45 "inputs": [
46 { "externalDependencies": ["storybook", "@storybook/test-runner"] }
47 ],
48 "executor": "nx:run-commands",
49 "options": {
50 "command": "test-storybook --config-dir my-project/.storybook"
51 },
52 "configurations": {}
53 },
54 "static-storybook": {
55 "executor": "@nx/web:file-server",
56 "options": {
57 "buildTarget": "build-storybook",
58 "staticFilePath": "dist/storybook/my-project"
59 },
60 "configurations": {}
61 }
62 }
63}
64You can also use the nx show project my-project command with the --json false flag to see a concise output of the inferred targets:
1Name: my-project
2Root: my-project
3Source Root: my-project/src
4Tags:
5Implicit Dependencies:
6Targets:
7- build-storybook: @storybook/angular:build-storybook
8- storybook: @storybook/angular:start-storybook
9- test-storybook: nx:run-commands
10- static-storybook: @nx/web:file-server
11