build-storybook watch mode not working

[saulrobe]

Bug
Running build-storybook with the -w or --watch flags do not run the storybook build in watch mode. The build runs once and ends. The cli option described here does not produce the desired results.

It seems like the feature was added here but has since been broken.

[shilman]

@ndelangen @tmeasday This looks like a regression in build-storybook. Is it something we want to fix, or should we remove it from the CLI / documentation? I'm leaning towards removing it.

[tmeasday]

Wow I didn't even know we had that feature! I'd say drop it.

[shilman]

Apparently we don't! 😂 Ok agreed, let's remove it from the CLI flags and from the docs. Can anybody help with a PR? 🙏

[Rajat-patel19]

i want to work on this
can anyone help me out

[shilman]

@Rajat-patel19 Thank you for helping make Storybook better! 🙏 Please check out how to contribute in our docs and feel free to ask questions in #contributing in our Discord.

[BrandonDickson]

I was using the feature successfully until it was broken. Please don't remove it.

[ievgen11]

I was using this feature actively, until it broke. Can you please fix and keep the --watch param? 🙏

[shilman]

@ievgen11 we have a dev server specifically for this purpose. what's the use case for rebuilding the static site in watch mode?

[ievgen11]

Hey @shilman ! 😄

My project is structured as a monorepo with multiple applications being compiled and served separately from different folders using NGINX. The Storybook is one of those applications, essentially being the design system presentation tool.

When developing locally, I need to make sure that the storybook application not only builds, but also re-builds on files changed. All the applications within my monorepo project are served using the single NGINX server. Although it is advised above to use the start-storybook command, I do not have a possibility to host the storybook instance on an additional server / port, as this would break my current project architecture.

In short: Previously, it was possible to compile, and watch for changes to re-compile. Now, I am advised to compile, re-compile, and also use an additional development server, which in my case is completely unnecessary.

I hope this helps 🙏

[shilman]

Egads!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-beta.4 containing PR #16165 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

@ievgen11 thanks so much for outlining your use case. this feature has been broken in storybook for some number of versions, and I just merged the PR to make the CLI consistent with the current functionality. Unfortunately, I don't foresee us bringing that back. If we see enough demand, perhaps we can bring it back in the future. In the meantime, you'll need to figure out a way to rebuild Storybook when you need it OR figure out a way to proxy from nginx to the dev server port.

[chee]

I have the same use case as above. I build several websites into one directory with different tools on watch mode, and then serve the build directory with a simple http server.

[burdisal]

I was actively using this feature until it broke as well. Very sad to see it dropped.

[shilman]

For anybody who wants this back, please upvote by adding a 👍 to the original issue description. We use this to help prioritize!

[Salman2301]

If anyone has alternate solution using nodemon or pm2
Please share.
it's frustrating to run storybook everytime i do some minor change that break webpack build

[ievgen11]

Is there any update on this? 🙏

[akashchakroborty]

I want the feature back pls. It's so frustrating to every time do a local build to see minor changes. Please bring it back 👍

[shilman]

So is it safe to say that everybody who was using this feature is unable to dev mode (aka start-storybook)?

[ievgen11]

Using start-storybook mode adds additional complications and breaks a lot of workflows, based on the comments above. Unfortunately, there is not much we can do other than wait for the fix and being unable to have a working storybook instance, or replace storybook with an alternative that supports re-builds on files changed without an additional server. 😞

[hiebj]

I have a workflow for development and testing that involves hosting additional static files beyond what storybook is aware of. My web components are bundled separately and included with a script tag in the storybook head, and I have sandbox HTML pages that are used in Cypress testing. It cannot be done any other way, this is how our components are built - they are not compiled with webpack and they are delivered from a CDN, not imported and bundled with the applications that consume them.

If I have two separate servers running, one for static files and one for storybook with watch mode, I run into CORS problems and a lot of other headaches. Trying to force the Storybook dev server to do this well is impractical, as my use case involves things like rewrites and redirects. It is much preferable to use superstatic, or any dedicated static server, to host the static storybook website along with my other resources so it all comes from one domain, port, and server. I have honestly tried any number of workarounds to make this smooth using only the storybook dev server but it is just not possible.

as things are I am having to manually rebuild the entire storybook static website every time there is a change, automating this is not trivial. and it creates a ton of overhead, especially considering that incremental rebuilds with webpack are entirely possible, there should really be no reason that you can't support this.

If it were possible (and preferably easy) to build Storybook myself using a Webpack config, I could just run my own Webpack build for Storybook in watch mode. But there is no documented way to do this, and my suspicion is that building Storybook without build-storybook is quite complicated.

[elia]

@shilman we are in a similar situation and would greatly benefit from having the --watch option working, I added a 👍 to the original posts, but wondering if this needs to be reopened in order to get prioritized, if that's the case can you reopen?

[jaredcwhite]

I also find myself wanting to use this feature. I'm attempting to build a Storybook integration with Bridgetown, a Ruby-based site generator, and using Storybook's server mode to load components rendered and served through Bridgetown's own web server. Thus running Storybook/Webpack dev server separately as another server is entirely superfluous and complicates the configuration. I'd prefer to set up a static build process in watch mode and let Bridgetown's server handle everything in a /_storybook/ subfolder or something to that effect.

[abdo99989]

So is it safe to say that everybody who was using this feature is unable to dev mode (aka start-storybook)?

There's, I am using it with a conjuction of my own server, my app is on: local.example.com , and i want my storybook to run on local.example.com/storybook, my app is large scale and I load fonts in css file, links are related to the domain local.example.com, watch mode runs on localhost, so... it won't work

[elektronik2k5]

My use case: I'm facing an issue which only reproduces in a storybook build. Storybook dev and app dev/build are all fine and ONLY storybook build has an issue. Watch mode would make it easy to troubleshoot and Vite natively supports that.

In my case, I can rephrase the question: how can I pass options from storybook build into vite build?

[conceptree]

Hello there,

We have several MDX based pages in our storybook that get its CSS classes from a global file that in our case is the preview-head.html. Without the watch mode we need to keep re-building storybook everytime that we need to update those styles what is quiet boring.

Will you really drop this feature or are at least considering it as one of your backlog priorities?

Cheers.