From 8dfc5cc4d2efdfe768ca861f7c23f1ab4983c6c8 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Tue, 6 Aug 2024 14:42:26 -0600
Subject: [PATCH] Update badly-migrated snippet

- Migration script did not correctly handle snippets with paths that had different filenames
---
 docs/_snippets/angular-builder-production.md     | 14 ++++++++++++++
 docs/_snippets/custom-build-script-production.md |  8 --------
 docs/sharing/publish-storybook.mdx               | 16 ++++++++++++++--
 3 files changed, 28 insertions(+), 10 deletions(-)
 create mode 100644 docs/_snippets/angular-builder-production.md
 delete mode 100644 docs/_snippets/custom-build-script-production.md

diff --git a/docs/_snippets/angular-builder-production.md b/docs/_snippets/angular-builder-production.md
new file mode 100644
index 00000000000..aa2b0a7d272
--- /dev/null
+++ b/docs/_snippets/angular-builder-production.md
@@ -0,0 +1,14 @@
+```shell renderer="angular" tabTitle="with-builder"
+# Builds Storybook with Angular's custom builder
+# See https://storybook.js.org/docs/get-started/frameworks/angular#how-do-i-migrate-to-an-angular-storybook-builder
+# to learn how to create the custom builder
+ng run my-project:build-storybook
+```
+
+```json renderer="angular" language="js" filename="package.json" tabTitle="script-for-builder"
+{
+  "scripts": {
+    "build-storybook": "ng run my-project:build-storybook"
+  }
+}
+```
diff --git a/docs/_snippets/custom-build-script-production.md b/docs/_snippets/custom-build-script-production.md
deleted file mode 100644
index ebca4a42035..00000000000
--- a/docs/_snippets/custom-build-script-production.md
+++ /dev/null
@@ -1,8 +0,0 @@
-```json renderer="angular" language="js" tabTitle="script-for-builder"
-{
-  "scripts": {
-    "build-storybook": "ng run my-project:build-storybook"
-  }
-}
-```
-
diff --git a/docs/sharing/publish-storybook.mdx b/docs/sharing/publish-storybook.mdx
index 007e914a0f3..9a29b5cd6d1 100644
--- a/docs/sharing/publish-storybook.mdx
+++ b/docs/sharing/publish-storybook.mdx
@@ -13,14 +13,26 @@ Teams publish Storybook online to review and collaborate on works in progress. T
 
 ## Build Storybook as a static web application
 
-First, we'll need to build Storybook as a static web application. The functionality is already built-in and pre-configured for most supported frameworks. Others require a bit of customization (e.g., Angular). Run the following command inside your project's root directory:
+First, we'll need to build Storybook as a static web application. The functionality is already built-in and pre-configured for most supported frameworks. Run the following command inside your project's root directory:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="custom-build-script-production.md" />
+<CodeSnippets path="build-storybook-production-mode.md" />
 
 {/* prettier-ignore-end */}
 
+<If renderer="angular">
+
+If you're using Angular, it's often better to use the [Angular builder](../get-started/frameworks/angular.mdx#how-do-i-migrate-to-an-angular-storybook-builder) to build Storybook: 
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="angular-builder-production.md" />
+
+{/* prettier-ignore-end */}
+
+</If>
+
 <Callout variant="info" icon="💡">
   You can provide additional flags to customize the command. Read more about the flag options [here](../api/cli-options.mdx).
 </Callout>