Provide option to render CLI using webpack-dashboard

[eliperelman]

I think it would be nice to provide the webpack-dashboard as a visualization option using something like:

neutrino start --dashboard

https://github.com/FormidableLabs/webpack-dashboard

[eliperelman]

Another interesting project:

https://github.com/webpackmonitor/webpackmonitor

[edmorley]

https://github.com/webpackmonitor/webpackmonitor

I tried this one since it looked superior from the screenshots, however with it the builds for Treeherder would hang or OOM and not complete. I've not had a chance to write a reduced testcase for them (and realistically might not in the foreseeable future).

[eliperelman]

The repo for https://github.com/FormidableLabs/electron-webpack-dashboard looked pretty good as well, with the caveat that it required you to install an Electron app prior to being able to run. If this could spin up a browser window instead that would be nice, or even if it installed itself when installing deps, that would be nice.

@kenwheeler would you happen to know if it's possible to consume the electron-webpack-dashboard in this manner, by either spinning up a browser window, or installing the app upon package install? Thanks!

[ghost]

Hey guys! Do you know if this is still open to work on? Thanks!

[eliperelman]

@collinklippel Sure is, thank you! I'll try and post my thoughts on how this would probably work:

First, you'll need a CLI option to decide to show the dashboard, for now let's pretend it's --dashboard. All of Neutrino's CLI interface is defined in https://github.com/mozilla-neutrino/neutrino-dev/tree/master/packages/neutrino/bin, and I figure this flag is only useful when using the start command. To add a new option for the start command, you need to modify this yargs command:

https://github.com/mozilla-neutrino/neutrino-dev/blob/master/packages/neutrino/bin/neutrino.js#L61

Once you have the flag for the command, you'll need to modify the command to actually use it. If you are implementing webpack-dashboard, this means you'll need to inject some custom middleware to add it to plugins. The code for the start command is here:

https://github.com/mozilla-neutrino/neutrino-dev/blob/master/packages/neutrino/bin/start.js

Notice that the start command receives two arguments: middleware and args. The middleware is an array, so you can either push a new function on the end, or tack one onto the beginning.

middleware.push((neutrino) => {
  neutrino.config.plugins // ...
});

And args contains your options, so you can conditionally load said middleware if your dashboard flag is in place.

If you want to test that this is working, you can invoke the create-neutrino-project stuff defined in package.json:

https://github.com/mozilla-neutrino/neutrino-dev/blob/master/package.json#L19

I would do that in a temporary directory, so run:

cd $TMPDIR && yarn cnp

Then create any web project, go into the dir, and modify the start command to use your dashboard flag.

Hope that gives you a start, let us know if you have any questions or any issues arise. Thanks!

[agereaude]

@collinklippel I've been working on this yesterday and created a PR.

[edmorley]

I'm very reluctant to add more third-party dependencies that can then cause bugs/bloat Neutrino/give us more to maintain/block future webpack upgrades etc (one of the options above is already calling itself "not maintained", somewhat proving the point). As such - I think this should be left to third-party presets for now.