
Introducing Webpack Dashboard - thekenwheeler
https://formidable.com/blog/2016/08/15/introducing-webpack-dashboard/
======
methyl
JS community will never stop to surprise me, both in negative and positive
ways. This is certainly a great idea and I no wonder it came out of JS people.

Of course we got some fatigue in the ecosystem, but things like Webpack
Dashboard strengthens my belief the fatigue is a tradeoff worth to pay.

BTW. if you like Blessed, certainly check out react-blessed:
[https://github.com/Yomguithereal/react-
blessed](https://github.com/Yomguithereal/react-blessed)

~~~
smnscu
I always wondered, can blessed/react-blessed be used in the browser? I've been
looking for a good JS terminal emulator for a while (not something like [1]
that connects to an actual shell session). Actually, this thing featured on HN
recently via Nodal looks promising [2].

1: [https://github.com/chjj/tty.js/](https://github.com/chjj/tty.js/)

2: [https://www.npmjs.com/package/cmnd](https://www.npmjs.com/package/cmnd)

~~~
benoror
hyperterm.org

~~~
rublev
He said _good_ JS terminal emulator.

------
jswny
Cached:
[https://webcache.googleusercontent.com/search?q=cache:r9y6bl...](https://webcache.googleusercontent.com/search?q=cache:r9y6blEJKP0J:https://formidable.com/blog/2016/08/15/introducing-
webpack-dashboard/+&cd=1&hl=en&ct=clnk&gl=us)

And the GitHub Repo: [https://github.com/FormidableLabs/webpack-
dashboard](https://github.com/FormidableLabs/webpack-dashboard)

------
colemannerd
You should try and uplevel this to main webpack. It should have a dev mode
that displays this.

------
BinaryIdiot
Webpack is supposed to be one of those things that you setup and then forget
about and is likely not the only piece of bundling / building your
application. So except for playing with this, admittedly pretty neat
interface, I don't see how this fits in the typical webpack workflow. I'd be
curious if they are logging metrics around how frequently it'll be used to see
if it's something people are actually interested in or if it'll just be a neat
thing everyone checks out once and then never goes back to it.

~~~
exogen
This isn't for setting up webpack (which you usually do once), but rather
running it continuously in development mode. At Formidable it's normal for us
each to have several long-running webpack-dev-server instances going at once,
so we can just edit files and see the changes immediately.

~~~
BinaryIdiot
Right but after you setup and start webpack do people actually look at the
terminal to see it recompiling / etc? At least anecdotally I haven't heard of
anyone doing that. You're not really going to be seeing much if anything
important there unless you're looking for errors or something similar.

~~~
donjh
I definitely keep the terminal open in the side of my window to catch any
errors throughout the development process. I just set up Webpack Dashboard
which was pretty easy, and now I can continue to keep my terminal up but I
have an even easier way to view any errors that may crop up.

~~~
glenjamin
I use the hot reloading tools to feed this information into the browser -
since I'm looking there anyway.

The client in webpack-hot-middleware will show build errors in a full screen
overlay by default.

------
i_live_there
I gotta say that I'm absolutely impressed with the blessed library. I didn't
heard of it until I saw this post. Wow, just wow

~~~
wdmeldon
Blessed is pretty incredible. For dashboard like apps specifically, blessed-
contrib is a huge time saver.

[https://github.com/yaronn/blessed-contrib](https://github.com/yaronn/blessed-
contrib)

------
smac8
This is awesome! However, when I add it to my webpack config it does load the
dashboard, but afterward still produces all the scrolled output. Anyone now
how to remove the scrolled output and just show the dash?

~~~
thekenwheeler
You'll want to set the webpack config option { quiet: true }

~~~
vonmoltke
Where?

Your (I assume you are the author) instructions say, for the dev server case:

> Ensure you've set quiet: true in your WebpackDevServer constructor:

I don't have a constructor. I just have a "devServer" section in
webpack.config.js that contains a contentBase entry.

Note that I am fairly new to webpack and am finding the (non-)documentation
for WebpackDevServer unhelpful.

~~~
donjh
How to you run webpack-dev-server during development? You might have a script
in your package.json that runs it - if so, add --quiet to the end of the
script there.

------
philip1209
Their SSL appears broken, so if you are using "HTTPS Everywhere" you will have
to circumvent to non-https.

~~~
exogen
This was a side effect of all the traffic somehow, the HTTPS version should be
working again shortly (looks like it's working for me now). Sorry for the
hassle!

------
mthoms
Can anyone point me towards how to build something like this with pure bash?
Is NCurses the answer?

~~~
akerro
try tiling windows managers
[https://www.reddit.com/r/unixporn/top/](https://www.reddit.com/r/unixporn/top/)

------
savanaly
Haven't tried it myself yet, but my first impression is that this looks very,
very cool.

------
rubber_duck
I can't get this to work with awesome-typescript-loader fork typechecker - it
overwrites the screen and scrolls past the end - am I missing something
obvious or is this not supported ?

When I disable it it works great, would be nice if I could use it with it.

~~~
thekenwheeler
I'm working on overriding stdout to go to the Log panel

~~~
rubber_duck
Thank you for doing this - things like this help me sell CLI stuff to the "if
it isn't in a VS menu it doesn't exist" crowd at work :)

~~~
tracker1
LOL... I usually just have a `build.cmd` that I add to the prebuild that runs
`CD /D %~dp0/.. ... npm run build` in a "scripts" directory. For those that
won't leave VS... I just have a separate window open for watch task.

------
visarga
Looks great and it would be nice to have work over http too. That way the UI
could be polished even more.

------
Willamin
Anyone know of any atom ui packages that mimic this kind of look?

------
mfrye0
This looks great. I'll definitely try it out.

------
b34r
Because adding GUIs to overcomplicated software with poor DUX always helps
things.

------
dotancohen
Nice, but useless. I suppose that I'm an old enough fart that the noisy and
scrolly" doesn't bother me one bit.

However, the "blessed" library that Webpack Dashboard uses _is_ impressive:
[https://github.com/chjj/blessed](https://github.com/chjj/blessed)

That's an ncurses-like library with some really nice features. I will be using
it.

~~~
ixtli
So what are the cases where "noisy and scrolly" bothers you in a way that
makes it reasonable to apply blessed?

~~~
dotancohen
Anything interactive. Yum updating, where one is inclined to view the
dependency tree, is a quick example.

I wouldn't be using blessed to replace "noisy and scrolly" but rather to
replace Qt for some simple-but-not-trivial scripts.

~~~
ixtli
Ah ok, so you're saying you'd use it to handle input rather than to "simplify"
output spew. Fair.

