-
Notifications
You must be signed in to change notification settings - Fork 2.6k
docs(nx-dev): add article about Storybook and watching buildable libs #33175
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for GitHub.
|
✅ Deploy Preview for nx-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
View your CI Pipeline Execution ↗ for commit c67567e
☁️ Nx Cloud last updated this comment at |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nx Cloud is proposing a fix for your failed CI:
We fixed the internal link checker errors by converting absolute URLs to relative paths and removing the reference to the missing image file. The article now uses relative paths (/docs/..., /nx-api/...) instead of full URLs (https://nx.dev/...), and the missing storybook-deps-graph.avif image reference has been removed from the content.
We verified this fix by re-running nx-dev:build
.
Suggested Fix changes
diff --git a/docs/blog/2025-10-29-storybook-watch-dependencies-nx.md b/docs/blog/2025-10-29-storybook-watch-dependencies-nx.md
index b881513a4d..d56b7a9b8b 100644
--- a/docs/blog/2025-10-29-storybook-watch-dependencies-nx.md
+++ b/docs/blog/2025-10-29-storybook-watch-dependencies-nx.md
@@ -10,17 +10,13 @@ youtubeUrl: https://youtu.be/URc1aQU0Scs
This came up in [our Discord](https://go.nx.dev/community): A Storybook setup in a library that depends on other packages in the monorepo. The problem? Some of these packages are so-called buildable libraries that need to be pre-built. However, this kinda breaks the developer experience because whenever you run Storybook and change something in one of those libraries, you won't see the effect right away. You need to manually rebuild the library, and only then will Storybook pick up the changes.
-Let me show you how we can fix this with Nx's [workspace watching feature](https://nx.dev/docs/guides/tasks--caching/workspace-watching).
+Let me show you how we can fix this with Nx's [workspace watching feature](/docs/guides/tasks--caching/workspace-watching).
{% toc /%}
## The Problem: Buildable Libraries and Storybook
-I reproduced the setup in a very simplistic way to demonstrate the issue. Here's what we're working with:
-
-
-
-We have a Storybook library (`feat-create-orders`) that depends on a buildable library (`ui`). The buildable library is configured to point to its pre-built output in the `dist` folder. This means everyone consuming this library in the monorepo will point to the pre-built version rather than the source files.
+I reproduced the setup in a very simplistic way to demonstrate the issue. We have a Storybook library (`feat-create-orders`) that depends on a buildable library (`ui`). The buildable library is configured to point to its pre-built output in the `dist` folder. This means everyone consuming this library in the monorepo will point to the pre-built version rather than the source files.
Here's what the `ui` library's `package.json` looks like:
@@ -48,7 +44,7 @@ Notice how the main entry points to `./dist/index.js`. This means we need to kee
## The Solution: Nx Workspace Watching
-Nx actually has a feature that allows you to watch files and automatically run commands when they change. You can find all the details in the [Workspace Watching guide](https://nx.dev/docs/guides/tasks--caching/workspace-watching) in the Nx docs.
+Nx actually has a feature that allows you to watch files and automatically run commands when they change. You can find all the details in the [Workspace Watching guide](/docs/guides/tasks--caching/workspace-watching) in the Nx docs.
The key is the `nx watch` command which lets you watch specific projects and run a command whenever a change is detected. Here's the basic syntax:
@@ -198,14 +194,14 @@ The combination of Nx's workspace watching, intelligent caching, and task orches
## Learn More
-- 📚 [Nx Workspace Watching Docs](https://nx.dev/docs/guides/tasks--caching/workspace-watching)
-- 🔧 [Storybook with Nx](https://nx.dev/nx-api/storybook)
+- 📚 [Nx Workspace Watching Docs](/docs/guides/tasks--caching/workspace-watching)
+- 🔧 [Storybook with Nx](/nx-api/nx/storybook)
- 🎬 [Watch the Video Tutorial](https://youtu.be/URc1aQU0Scs)
- 💻 [Demo Repository](https://github.com/juristr/nx-storybook-watchdeps)
Also, make sure to check out:
-- 📖 [Nx Docs](https://nx.dev)
+- 📖 [Nx Docs](/docs)
- 🐦 [X/Twitter](https://twitter.com/nxdevtools)
- 💼 [LinkedIn](https://www.linkedin.com/company/nrwl/)
- 🦋 [Bluesky](https://bsky.app/profile/nx.dev)
Or Apply changes locally with:
npx nx-cloud apply-locally YY3I-J1QE
Apply fix locally with your editor ↗ View interactive diff ↗
🎓 To learn more about Self Healing CI, please visit nx.dev
Current Behavior
Expected Behavior
Related Issue(s)
Fixes #