Storybook: Switch to suppress verbose build output?

[alanhogan]

Our project added storybook's start-storybook command to our Profile so we can start it and a couple other servers with nf (Foreman).

This works great but builds cause an extreme amount of output in this manner:

Would it be possible for the CLI to take a switch (maybe --quiet) that would suppress verbose/progress update messages?

[ndelangen]

Hey Alan! We've had this feature request before, I think we should add it, would you like to help us?

It would involve a small CLI change and a webpack config change.
Should be fairly easy to implement, do you want to give it a show?

If so, please use the release/3.3 branch as your base 👍 🙇

[alanhogan]

I could take a look. Where in the codebase does storybook-start live / examine the flags it gets?

[ndelangen]

Here's our guide to contribute:
https://github.com/storybooks/storybook/blob/release/3.3/CONTRIBUTING.md

Here's the code points your need:

https://github.com/storybooks/storybook/tree/release/3.3/app/react-native/src/bin

https://github.com/storybooks/storybook/blob/release/3.3/app/react/src/server/index.js
https://github.com/storybooks/storybook/blob/release/3.3/app/react/src/server/build.js

https://github.com/storybooks/storybook/blob/release/3.3/app/vue/src/server/index.js
https://github.com/storybooks/storybook/blob/release/3.3/app/vue/src/server/build.js

/app/.../src/server/config/webpack.config.js should contain the webpack config that has the progress plugin, that you want to disable.

I hope this helps,

[Hypnosphi]

@ndelangen I changed all the links to point to release/3.3 branch

[mmmeff]

How could we go about overriding the build output via webpack.config.js? I'm in full control mode and attempting to override it with config.devServer = { stats: 'errors-only' }; but no dice.

[ndelangen]

@mmmeff What you need to do is filter out the ProgressPlugin if you want to remove it that way.

https://github.com/storybooks/storybook/blob/release/3.3/app/react/src/server/config/webpack.config.js#L57

[mmmeff]

@ndelangen Since webpack's plugins field is defined as an array, removing that plugin is less than ideal. Here's my working but sloppy fix for disabling the progress output.

  config.plugins = config.plugins.filter((plugin) => {
    // Find and omit the plugin that looks like progress plugin.
    // This kinda sucks, but it works
    return !(
      Object.keys(plugin).length === 2
      && Object.keys(plugin).indexOf("profile") > -1
      && Object.keys(plugin).indexOf("handler") > -1
    )
  })

Got a better suggestion?

And before I forget, your comment definitely did help me out, so massive thanks for you are in order :)

[Hypnosphi]

@mmmeff does plugin.constructor.name !== 'ProgressPlugin' work? Still kinda hacky, but more explicit

[mmmeff]

@Hypnosphi That did the trick, thanks boss. For posterity, here's the configuration (simplified) to remove the progress plugin and quiet the log spam:

const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js')

module.exports = (baseConfig, env) => {
  const config = genDefaultConfig(baseConfig, env)
  config.plugins = config.plugins.filter(({ constructor }) => constructor.name !== "ProgressPlugin")

  return config
}

[alanhogan]

@mmmeff Is there a PR for that change? :D

[mmmeff]

@alanhogan No. You can add the above configuration to your own webpack.config.js in your .storybook directory though.

[alanhogan]

Oh you don’t say… cool… i'll have to give that a go, thanks!

[mmmeff]

@alanhogan These docs should help you out https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode-default

[ndelangen]

Thanks for helping out @mmmeff !

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[ndelangen]

Related: #1108

[Hypnosphi]

Released as 4.0.0-alpha.4 and 3.4.3