diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index 657b493379..7668cfa345 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -5005,9 +5005,9 @@ "disableCollapsible": false }, { - "name": "Angular: The browserTarget", - "path": "/deprecated/storybook/angular-browser-target", - "id": "angular-browser-target", + "name": "Angular - The projectBuildConfig", + "path": "/deprecated/storybook/angular-project-build-config", + "id": "angular-project-build-config", "isExternal": false, "children": [], "disableCollapsible": false @@ -5161,9 +5161,9 @@ "disableCollapsible": false }, { - "name": "Angular: The browserTarget", - "path": "/deprecated/storybook/angular-browser-target", - "id": "angular-browser-target", + "name": "Angular - The projectBuildConfig", + "path": "/deprecated/storybook/angular-project-build-config", + "id": "angular-project-build-config", "isExternal": false, "children": [], "disableCollapsible": false @@ -5212,9 +5212,9 @@ "disableCollapsible": false }, { - "name": "Angular: The browserTarget", - "path": "/deprecated/storybook/angular-browser-target", - "id": "angular-browser-target", + "name": "Angular - The projectBuildConfig", + "path": "/deprecated/storybook/angular-project-build-config", + "id": "angular-project-build-config", "isExternal": false, "children": [], "disableCollapsible": false diff --git a/docs/generated/manifests/nx.json b/docs/generated/manifests/nx.json index af5fbc4210..7bb352452f 100644 --- a/docs/generated/manifests/nx.json +++ b/docs/generated/manifests/nx.json @@ -6852,14 +6852,14 @@ "tags": [] }, { - "id": "angular-browser-target", - "name": "Angular: The browserTarget", - "description": "This document explains the role of the browserTarget in Angular projects with a Storybook configuration, and how the Storybook executors use it.", + "id": "angular-project-build-config", + "name": "Angular - The projectBuildConfig", + "description": "This document explains the role of the projectBuildConfig in Angular projects with a Storybook configuration, and how the Storybook executors use it.", "mediaImage": "", - "file": "shared/deprecated/storybook/angular-browser-target", + "file": "shared/deprecated/storybook/angular-project-build-config", "itemList": [], "isExternal": false, - "path": "/deprecated/storybook/angular-browser-target", + "path": "/deprecated/storybook/angular-project-build-config", "tags": [] }, { @@ -7067,14 +7067,14 @@ "tags": [] }, { - "id": "angular-browser-target", - "name": "Angular: The browserTarget", - "description": "This document explains the role of the browserTarget in Angular projects with a Storybook configuration, and how the Storybook executors use it.", + "id": "angular-project-build-config", + "name": "Angular - The projectBuildConfig", + "description": "This document explains the role of the projectBuildConfig in Angular projects with a Storybook configuration, and how the Storybook executors use it.", "mediaImage": "", - "file": "shared/deprecated/storybook/angular-browser-target", + "file": "shared/deprecated/storybook/angular-project-build-config", "itemList": [], "isExternal": false, - "path": "/deprecated/storybook/angular-browser-target", + "path": "/deprecated/storybook/angular-project-build-config", "tags": [] }, { @@ -7137,15 +7137,15 @@ "path": "/deprecated/storybook/angular-storybook-targets", "tags": [] }, - "/deprecated/storybook/angular-browser-target": { - "id": "angular-browser-target", - "name": "Angular: The browserTarget", - "description": "This document explains the role of the browserTarget in Angular projects with a Storybook configuration, and how the Storybook executors use it.", + "/deprecated/storybook/angular-project-build-config": { + "id": "angular-project-build-config", + "name": "Angular - The projectBuildConfig", + "description": "This document explains the role of the projectBuildConfig in Angular projects with a Storybook configuration, and how the Storybook executors use it.", "mediaImage": "", - "file": "shared/deprecated/storybook/angular-browser-target", + "file": "shared/deprecated/storybook/angular-project-build-config", "itemList": [], "isExternal": false, - "path": "/deprecated/storybook/angular-browser-target", + "path": "/deprecated/storybook/angular-project-build-config", "tags": [] }, "/deprecated/storybook/migrate-webpack-final-angular": { diff --git a/docs/generated/packages/storybook/executors/build.json b/docs/generated/packages/storybook/executors/build.json index 0f3075fb2a..3749dcfeb0 100644 --- a/docs/generated/packages/storybook/executors/build.json +++ b/docs/generated/packages/storybook/executors/build.json @@ -134,7 +134,7 @@ }, "additionalProperties": true, "required": ["configDir"], - "examplesFile": "---\ntitle: Storybook builder executor examples\ndescription: This page contains examples for the @nx/storybook:build executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"build-storybook\": {\n \"executor\": \"@nx/storybook:build\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ui\",\n \"configDir\": \"libs/ui/.storybook\"\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n }\n}\n```\n\n```bash\nnx run ui:build-storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\n{% tab label=\"Working in docsMode\" %}\n\nYou can work in docs mode, building a documentation-only site, by setting the `docsMode` option to `true` and using the `@storybook/addon-docs` addon.\n\nRead more on the [Storybook documentation page for `addon-docs`](https://storybook.js.org/addons/@storybook/addon-docs).\n\n```json\n\"storybook\": {\n \"executor\": \"@nx/storybook:build\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"docsMode\": true\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis 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](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"apps/ngapp/.storybook\",\n \"browserTarget\": \"ngapp:build\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/deprecated/storybook/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"apps/ngapp/.storybook\",\n \"browserTarget\": \"ngapp:build-storybook\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/recipes/storybook/angular-configuring-styles).\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"apps/ngapp/.storybook\",\n \"browserTarget\": \"ngapp:build-storybook\",\n \"compodoc\": false,\n \"styles\": [\"some-styles.css\"],\n \"stylePreprocessorOptions\": {\n \"includePaths\": [\"some-style-paths\"]\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n" + "examplesFile": "---\ntitle: Storybook builder executor examples\ndescription: This page contains examples for the @nx/storybook:build executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"build-storybook\": {\n \"executor\": \"@nx/storybook:build\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ui\",\n \"configDir\": \"libs/ui/.storybook\"\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n }\n}\n```\n\n```bash\nnx run ui:build-storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\n{% tab label=\"Working in docsMode\" %}\n\nYou can work in docs mode, building a documentation-only site, by setting the `docsMode` option to `true` and using the `@storybook/addon-docs` addon.\n\nRead more on the [Storybook documentation page for `addon-docs`](https://storybook.js.org/addons/@storybook/addon-docs).\n\n```json\n\"storybook\": {\n \"executor\": \"@nx/storybook:build\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"docsMode\": true\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis 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](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"apps/ngapp/.storybook\",\n \"browserTarget\": \"ngapp:build\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the `browserTarget` to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target. Read more about the `browserTarget` in the [Set up Storybook for Angular Projects](/recipes/storybook/overview-angular) recipe.\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"apps/ngapp/.storybook\",\n \"browserTarget\": \"ngapp:build-storybook\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/recipes/storybook/angular-configuring-styles).\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"apps/ngapp/.storybook\",\n \"browserTarget\": \"ngapp:build-storybook\",\n \"compodoc\": false,\n \"styles\": [\"some-styles.css\"],\n \"stylePreprocessorOptions\": {\n \"includePaths\": [\"some-style-paths\"]\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n" }, "description": "Build Storybook.", "aliases": [], diff --git a/docs/generated/packages/storybook/executors/storybook.json b/docs/generated/packages/storybook/executors/storybook.json index 6cc2a1403f..dc136a96ea 100644 --- a/docs/generated/packages/storybook/executors/storybook.json +++ b/docs/generated/packages/storybook/executors/storybook.json @@ -113,7 +113,7 @@ "additionalProperties": true, "definitions": {}, "required": ["configDir"], - "examplesFile": "---\ntitle: Storybook dev server executor examples\ndescription: This page contains examples for the @nx/storybook:storybook executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"storybook\": {\n \"executor\": \"@nx/storybook:storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\"\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n },\n }\n}\n```\n\n```bash\nnx run ui:storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\n{% tab label=\"Working in docsMode\" %}\n\nYou can work in docs mode, building a documentation-only site, by setting the `docsMode` option to `true` and using the `@storybook/addon-docs` addon.\n\nRead more on the [Storybook documentation page for `addon-docs`](https://storybook.js.org/addons/@storybook/addon-docs).\n\n```json\n\"storybook\": {\n \"executor\": \"@nx/storybook:storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"docsMode\": true\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis is the default configuration for Angular projects using Storybook. You can see that it uses the native `@storybook/angular:start-storybook` executor. You can read more about the configuration options at the relevant [Storybook documentation page](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/deprecated/storybook/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/recipes/storybook/angular-configuring-styles).\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false,\n \"styles\": [\"some-styles.css\"],\n \"stylePreprocessorOptions\": {\n \"includePaths\": [\"some-style-paths\"]\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n\n{% /tabs %}\n" + "examplesFile": "---\ntitle: Storybook dev server executor examples\ndescription: This page contains examples for the @nx/storybook:storybook executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"storybook\": {\n \"executor\": \"@nx/storybook:storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\"\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n },\n }\n}\n```\n\n```bash\nnx run ui:storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\n{% tab label=\"Working in docsMode\" %}\n\nYou can work in docs mode, building a documentation-only site, by setting the `docsMode` option to `true` and using the `@storybook/addon-docs` addon.\n\nRead more on the [Storybook documentation page for `addon-docs`](https://storybook.js.org/addons/@storybook/addon-docs).\n\n```json\n\"storybook\": {\n \"executor\": \"@nx/storybook:storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"docsMode\": true\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis is the default configuration for Angular projects using Storybook. You can see that it uses the native `@storybook/angular:start-storybook` executor. You can read more about the configuration options at the relevant [Storybook documentation page](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the `browserTarget` to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target. Read more about the `browserTarget` in the [Set up Storybook for Angular Projects](/recipes/storybook/overview-angular) recipe.\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/recipes/storybook/angular-configuring-styles).\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false,\n \"styles\": [\"some-styles.css\"],\n \"stylePreprocessorOptions\": {\n \"includePaths\": [\"some-style-paths\"]\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n\n{% /tabs %}\n" }, "description": "Serve Storybook.", "aliases": [], diff --git a/docs/map.json b/docs/map.json index 5007597a49..33a958d9d1 100644 --- a/docs/map.json +++ b/docs/map.json @@ -1429,10 +1429,10 @@ "file": "shared/deprecated/storybook/angular-storybook-targets" }, { - "id": "angular-browser-target", - "name": "Angular: The browserTarget", - "description": "This document explains the role of the browserTarget in Angular projects with a Storybook configuration, and how the Storybook executors use it.", - "file": "shared/deprecated/storybook/angular-browser-target" + "id": "angular-project-build-config", + "name": "Angular - The projectBuildConfig", + "description": "This document explains the role of the projectBuildConfig in Angular projects with a Storybook configuration, and how the Storybook executors use it.", + "file": "shared/deprecated/storybook/angular-project-build-config" }, { "id": "migrate-webpack-final-angular", diff --git a/docs/shared/deprecated/storybook/angular-browser-target.md b/docs/shared/deprecated/storybook/angular-project-build-config.md similarity index 54% rename from docs/shared/deprecated/storybook/angular-browser-target.md rename to docs/shared/deprecated/storybook/angular-project-build-config.md index be205f9c69..c40b09977c 100644 --- a/docs/shared/deprecated/storybook/angular-browser-target.md +++ b/docs/shared/deprecated/storybook/angular-project-build-config.md @@ -1,49 +1,18 @@ --- -title: Angular - The browserTarget -description: This document explains the role of the browserTarget in Angular projects with a Storybook configuration, and how the Storybook executors use it. +title: Angular - The projectBuildConfig +description: This document explains the role of projectBuildConfig in Angular projects with a Storybook configuration, and how the Storybook executors use it. --- -# The `browserTarget` for Angular projects with a Storybook configuration +# Setting up `projectBuildConfig` for Nx versions `<14.1.8` + +{% callout type="warning" title="Deprecated!" %} +**Careful**: This is for older versions of Nx - for the latest version please look at the [Set up Storybook for Angular Projects](/recipes/storybook/overview-angular) recipe. +{% /callout %} {% callout type="note" title="Note" %} This documentation page contains information about the [Storybook plugin](/nx-api/storybook), specifically regarding [Angular projects that are using Storybook](/recipes/storybook/overview-angular). {% /callout %} -## Setting up `browserTarget` - -If you're using [Storybook](/nx-api/storybook) in your Angular project, you will notice that `browserTarget` is specified for the `storybook` and `build-storybook` targets, much like it is done for `serve` or other targets. Angular needs the `browserTarget` for Storybook in order to know which configuration to use for the build. If your project is buildable (it has a `build` target, and uses the main Angular builder - `@angular-devkit/build-angular:browser`) the `browserTarget` for Storybook will use the `build` target, if it's not buildable it will use the `build-storybook` target. -You do not have to do anything manually. Nx will create the configuration for you. Even if you are migrating from an older version of Nx, Nx will make sure to change your `package.json` Storybook targets to match the new schema. - -You can read more about the `browserTarget` in the [official Angular documentation](https://angular.io/cli/serve). - -Your Storybook targets in your `project.json` will look like this: - -```jsonc {% fileName="project.json" %} - "storybook": { - "executor": "@storybook/angular:start-storybook", - "options": { - ... - "browserTarget": "my-project:build" - }, - ... - }, - "build-storybook": { - "executor": "@storybook/angular:build-storybook", - ... - "options": { - ... - "browserTarget": "my-project:build" - }, - ... - } -``` - -This setup instructs Nx to use the configuration under the `build` target of `my-project` when using the `storybook` and `build-storybook` executors. - -## Setting up `projectBuildConfig` for Nx versions `<14.1.8` - -**_Careful: This is for older versions of Nx - for the latest version please look at the section above, about `browserTarget`_** - If you are on Nx version `<14.1.8`, you're still using our custom executor, which means that you have to comply by the Nx Storybook schema. This means that the contents of `browserTarget` should be placed in the `projectBuildConfig` property. This is telling Storybook where to get the build configuration from. To know more about the purpose of `browserTarget` (and `projectBuildConfig`) read the section above. If you're using Nx version `>=13.4.6` either in a new Nx workspace, or you migrated your older Nx workspace to Nx version `>=13.4.6`, Nx will automatically add the `projectBuildConfig` property in your projects `project.json` files, for projects that are using Storybook. diff --git a/docs/shared/recipes/storybook/plugin-angular.md b/docs/shared/recipes/storybook/plugin-angular.md index d20cbe390d..a8d30fea5c 100644 --- a/docs/shared/recipes/storybook/plugin-angular.md +++ b/docs/shared/recipes/storybook/plugin-angular.md @@ -143,12 +143,43 @@ export const Heading: Story = { Notice the interaction test on the second story, inside the `play` function. This just tests if the default text that appears on generated components exists in the rendered component. You can edit this test to suit your needs. You can read more about interaction tests [here](https://storybook.js.org/docs/angular/writing-tests/interaction-testing). +## Understanding the role of `browserTarget` + +You will notice that `browserTarget` is specified for the `storybook` and `build-storybook` targets, much like it is done for `serve` or other targets. Angular needs the `browserTarget` for Storybook in order to know which configuration to use for the build. If your project is buildable (it has a `build` target, and uses the main Angular builder - `@angular-devkit/build-angular:browser`, `@angular-devkit/build-angular:application` or `@angular-devkit/build-angular:browser-esbuild`) the `browserTarget` for Storybook will use the `build` target, if it's not buildable (or is using another Angular builder) it will use the `build-storybook` target. +You do not have to do anything manually. Nx will create the configuration for you. Even if you are migrating from an older version of Nx, Nx will make sure to change your `package.json` Storybook targets to match the new schema. + +You can read more about the `browserTarget` in the [official Angular documentation](https://angular.io/cli/serve). + +Your Storybook targets in your `project.json` (or if you run `nx show project my-project --web`) will look like this: + +```jsonc {% fileName="project.json" %} + "storybook": { + "executor": "@storybook/angular:start-storybook", + "options": { + ... + "browserTarget": "my-project:build" + }, + ... + }, + "build-storybook": { + "executor": "@storybook/angular:build-storybook", + ... + "options": { + ... + "browserTarget": "my-project:build" + }, + ... + } +``` + +This setup instructs Nx to use the configuration under the `build` target of `my-project` when using the `storybook` and `build-storybook` executors. + ## More Documentation - [Set up Compodoc for Storybook on Nx](/recipes/storybook/angular-storybook-compodoc) - [Information about the `storybook` tasks](/deprecated/storybook/angular-storybook-targets) - [Configuring styles and preprocessor options](/recipes/storybook/angular-configuring-styles) -- [The `browserTarget`](/deprecated/storybook/angular-browser-target) +- [The `projectBuildConfig`](/deprecated/storybook/angular-project-build-config) You can find all Storybook-related Nx topics [here](/nx-api#storybook). diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md index f4b7f900f2..a1ae8af926 100644 --- a/docs/shared/reference/sitemap.md +++ b/docs/shared/reference/sitemap.md @@ -230,7 +230,7 @@ - [Angular Schematics and Builders](/deprecated/angular-schematics-builders) - [Storybook deprecated docs](/deprecated/storybook) - [Angular: Information about the Storybook targets](/deprecated/storybook/angular-storybook-targets) - - [Angular: The browserTarget](/deprecated/storybook/angular-browser-target) + - [Angular - The projectBuildConfig](/deprecated/storybook/angular-project-build-config) - [Angular: Storybook Migration to webpackFinal](/deprecated/storybook/migrate-webpack-final-angular) - [Angular: Upgrading to Storybook 6](/deprecated/storybook/upgrade-storybook-v6-angular) - [React: Storybook Migration to webpackFinal and the Nx Addon](/deprecated/storybook/migrate-webpack-final-react) diff --git a/nx-dev/nx-dev/redirect-rules.js b/nx-dev/nx-dev/redirect-rules.js index 97d75821a9..e274b764fa 100644 --- a/nx-dev/nx-dev/redirect-rules.js +++ b/nx-dev/nx-dev/redirect-rules.js @@ -687,7 +687,9 @@ const packagesDocuments = { '/packages/storybook/documents/angular-configuring-styles': '/recipes/storybook/angular-configuring-styles', '/storybook/angular-browser-target': - '/deprecated/storybook/angular-browser-target', + '/deprecated/storybook/angular-project-build-config', + '/deprecated/storybook/angular-browser-target': + '/deprecated/storybook/angular-project-build-config', '/storybook/migrate-webpack-final-angular': '/deprecated/storybook/migrate-webpack-final-angular', '/storybook/upgrade-storybook-v6-angular': @@ -697,7 +699,7 @@ const packagesDocuments = { '/storybook/upgrade-storybook-v6-react': '/deprecated/storybook/upgrade-storybook-v6-react', '/packages/storybook/documents/angular-browser-target': - '/deprecated/storybook/angular-browser-target', + '/deprecated/storybook/angular-project-build-config', '/packages/storybook/documents/migrate-webpack-final-angular': '/deprecated/storybook/migrate-webpack-final-angular', '/packages/storybook/documents/upgrade-storybook-v6-angular': diff --git a/packages/storybook/docs/build-storybook-executor-examples.md b/packages/storybook/docs/build-storybook-executor-examples.md index ae6f1245e2..7fdc3ed536 100644 --- a/packages/storybook/docs/build-storybook-executor-examples.md +++ b/packages/storybook/docs/build-storybook-executor-examples.md @@ -89,7 +89,7 @@ This is the default configuration for Angular projects using Storybook. You can {% /tab %} {% tab label="Changing the browserTarget" %} -You can set the [`browserTarget`](/deprecated/storybook/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target. +You can set the `browserTarget` to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target. Read more about the `browserTarget` in the [Set up Storybook for Angular Projects](/recipes/storybook/overview-angular) recipe. ```json "build-storybook": { diff --git a/packages/storybook/docs/storybook-executor-examples.md b/packages/storybook/docs/storybook-executor-examples.md index 2d21ac3390..42967dee05 100644 --- a/packages/storybook/docs/storybook-executor-examples.md +++ b/packages/storybook/docs/storybook-executor-examples.md @@ -88,7 +88,7 @@ This is the default configuration for Angular projects using Storybook. You can {% /tab %} {% tab label="Changing the browserTarget" %} -You can set the [`browserTarget`](/deprecated/storybook/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target. +You can set the `browserTarget` to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target. Read more about the `browserTarget` in the [Set up Storybook for Angular Projects](/recipes/storybook/overview-angular) recipe. ```json "storybook": { diff --git a/packages/storybook/src/utils/utilities.ts b/packages/storybook/src/utils/utilities.ts index ef56803325..e44bbfa0a9 100644 --- a/packages/storybook/src/utils/utilities.ts +++ b/packages/storybook/src/utils/utilities.ts @@ -149,13 +149,18 @@ export function findStorybookAndBuildTargetsAndCompiler(targets: { '@nrwl/esbuild:esbuild', '@nrwl/next:build', '@nxext/vite:build', + '@angular-devkit/build-angular:application', '@angular-devkit/build-angular:browser', + '@angular-devkit/build-angular:browser-esbuild', ]; for (const target in targets) { if (arrayOfBuilders.includes(targets[target].executor)) { if ( - targets[target].executor === '@angular-devkit/build-angular:browser' + targets[target].executor === '@angular-devkit/build-angular:browser' || + targets[target].executor === + '@angular-devkit/build-angular:browser-esbuild' || + targets[target].executor === '@angular-devkit/build-angular:application' ) { /** * Not looking for '@nx/angular:ng-packagr-lite' or any other