Allow disabling the progressbar plugin with a commandline flag

[luftywiranda13]

I'm using custom config as suggested in https://storybook.js.org/basics/writing-stories/#loading-stories-dynamically to dynamically load stories.

is there a way to tame the CLI outputs of start-storybook a little bit? cause currently it's too noisy to me

[thebuilder]

Was just about to ask about this myself. It clashes with my default dev task CLI output. :)

[luftywiranda13]

oh ya, another issue I get is the building modules never really get to 100%,
always stuck in 69% but my stories are loaded just fine in the browser

[usulpro]

Hey, Guys!
I'm not sure what the reason for the new CLI behavior but in my case, I just need to make the shell window wide enough to collapse all this output into the only one line:

[danielduan]

I'm for silencing the webpack progress by default. The output makes configuring compilation on IDEs like WebStorm a nightmare as well.

Has anyone tried progress-bar-webpack-plugin yet?

[thebuilder]

This was introduced in version 3.1.2.
Reverting to 3.0.1 removes the progress output. Looking at the release notes, there doesn't seem to be anything related to build progress output.

[thebuilder]

It was introduced in this commit, that add adds the ProgressPlugin: 7c707f6

[thebuilder]

Temporary fix is to remove the plugin from webpack config you create:

const webpack = require('webpack');

module.exports = (config, env) => {
  config.plugins = config.plugins.filter(plugin => !(plugin instanceof webpack.ProgressPlugin))

  return config;
};

[shilman]

@thebuilder the release notes are a concatenation of every closed PR that is not labeled with the cleanup (reserved for minor fixes like typos).

@ndelangen we should be more disciplined about not lumping too many separate issues into PR's

[luftywiranda13]

@thebuilder yeah but unfortunately it's not that easy to alter the storybook's webpack config in a project created by CRA or CRNA.

@shilman well, a small & focus PR is always better, right?

[shilman]

@luftywiranda13 @ndelangen did some seriously heavy lifting on the project, e.g. enabling strict linting (for which we should all be grateful!) and it would have been impractical to split it up into many PR's. the downside is that when we get sloppy, stuff like this doesn't make it into the changelog.

[ndelangen]

I'm sorry if this inconvenienced you! I can try write a ProgressPlugin myself that doesn't have this issue. but of course the best option would be for me or someone else to actually fix this in webpack.

We should actually file a bug for this on webpack ProgressPlugin.

I have been looking for a good entry point to start contributing to webpack, but I fear that it would mean I'd get too much on my plate. There's only so much I can do.

I'm trying to be disciplined and only do 1 thing in 1 PR, but of course the fact is also there's a lot going on.

---

@danielduan I have tried the progress-bar-webpack-plugin, it's not as informative as the regular webpack ProgressPlugin.

---

@luftywiranda13 It's not actually stuck, it does reach 100%, but the terminal doesn't print the output right. It's probably that the ProgressPlugin doesn't account for the max-length (screen-width) of the terminal correctly, causing line that are supposed to be on 1 line wrap to 2 lines.

---

@thebuilder Thanks for sharing your solution!

[thebuilder]

@ndelangen I think it's fine with a ProgressPlugin - Just think it should be possible to disable and/or configure it.

A --no-progress command in the CLI options would be a great start. 👍

[luftywiranda13]

@ndelangen to have it be configurable from storybook sounds good to me, I agree with @thebuilder

[ndelangen]

Toggleable sounds OK to me.

[ndelangen]

So who's interested in turning this issue into a PR?
@luftywiranda13 @thebuilder @danielduan ?

[stale]

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]

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!

[airtonix]

So what hapened here?

Storybook 5.3 still fills up my console with epic spam:

Storybook: Let me tell you a story of high adventure
Me:

[ndelangen]

You can disable this with:

storybook/lib/core/src/server/cli/dev.js

Line 29 in c604b26

.option('--quiet', 'Suppress verbose build output')

from the docs:

For start-storybook

Usage: start-storybook [options]

Options:

--help                        output usage information
-V, --version                 output the version number
-p, --port [number]           Port to run Storybook
-h, --host [string]           Host to run Storybook
-s, --static-dir <dir-names>  Directory where to load static files from, comma-separated list
-c, --config-dir [dir-name]   Directory where to load Storybook configurations from
--https                       Serve Storybook over HTTPS. Note: You must provide your own certificate > information.
--ssl-ca <ca>                 Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)
--ssl-cert <cert>             Provide an SSL certificate. (Required with --https)
--ssl-key <key>               Provide an SSL key. (Required with --https)
--smoke-test                  Exit after successful start
--ci                          CI mode (skip interactive prompts, don't open browser)
--quiet                       Suppress verbose build output
--no-dll                      Do not use dll reference
--debug-webpack               Display final webpack configurations for debugging purposes

[codemile]

The --quiet option works great, but it also removes the "Storybook...started" message which contains the local URL, and I'm running a mono repo with many storybooks with Nx workspace. Each configured to have a different port, so I want to run multiple storybooks with a single command, but the webpack process messages spam the output. Using --quiet does work but I can't remember what all the different port numbers are.

I found this approach works best for me with Nx. Here is how I run 3 storybooks from projects named project## in Nx.

nx run-many -t storybook \
    -p projectA projectB projectC \
    --parallel=3 \
    --output-style=stream 2>&1 | grep -v "webpack.Progress"