Introducing Webpack Dashboard | Hacker News Reader

Introducing Webpack Dashboard

formidable.com

441 pointsthekenwheeler54 comments

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

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/

2: https://www.npmjs.com/package/cmnd

hyperterm.org

He said good JS terminal emulator.

I think it stems from the language with it's simple untyped syntax and data-structures.

I like larger projects to be typed and my favorite language at the moment is definitely kotlin, but for quick prototyping I really like hacking things together in JS.

You could always check out https://flowtype.org/

It's not just about being typed or not. I know huge, successful Ruby codebases which is not typed. Ruby ecosystem is just much more consistent and convenient than JS.

I know ruby. I worked with "merb" for a project (before it became rails 3) and use it for shellscripts from time to time.

Still JS is somehow more pleasurable, but I guess it's a matter of taste.

Just to be clear for folks who don't know. Ruby is _strongly_ typed, but it's also _dynamically_ typed not _statically_ typed.

Cached: https://webcache.googleusercontent.com/search?q=cache:r9y6bl...

And the GitHub Repo: https://github.com/FormidableLabs/webpack-dashboard

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

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.

AFAICT the dashboard would be awesome for Webpack's watch mode (or webpack-dev-server).

My workflow consists of running a Webpack dev server watchinf for changes and hot reloadings them in my browser/phone.

I watch build statuses. A lot of them. Eager to try this dashboard!

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.

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.

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.

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 do it to have a visual signal of when the new build should be ready and available on other devices (and so I can catch syntax errors).

It may also be nice to have an idea of the relative weight of each of your dependencies. Of course, since its in dev mode, what Dashboard shows probably isn't the same as the final bundle size.

I think this is exactly the problem the author wanted to solve: you don't get info from the webpack logs. He/She wanted to do something that exposed useful info about webpack.

Maybe I'm doing it wrong, but I check for any linting warnings/errors.

I dunno if you're doing it wrong (it sounds better than what I do), but my build for most projects won't build if there are warnings so I don't end up looking at the terminal unless there are errors that I don't really understand.

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

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

https://github.com/yaronn/blessed-contrib

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?

I think this will happen if you skip the "Turn off errors" part of the instructions: https://github.com/FormidableLabs/webpack-dashboard#turn-off... – did you catch that part?

Apparently! Thanks for linking

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

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.

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.

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

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!

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

try tiling windows managers https://www.reddit.com/r/unixporn/top/

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

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.

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

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 :)

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.

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

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

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

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

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

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

> Nice, but useless.

For you, but not others.

What exactly is useful about it, I dont really feel like it would add anything to my experience.

The GitHub page has a pretty great example:

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

It replaces the endlessly scrolling output of webpack-dev-server with a dashboard, providing at-a-glance info.

Well I've been working on a big angular project for over a year and I couldn't tell you offhand what the ten biggest modules are in it or confirm with certainty every single one is still being used. Even though I know this is the sort of thing I should devote more attention to and for which there's ample tooling, having it staring me right there in the face every day when I run the server would be a big improvement.

It will make the display of webpack information more organized and glance-able, which will improve my experience.

And I appreciate the aesthetics, nice looking things motivate me to work, so that's a bonus too. Anybody who says this is superficial doesn't know how humans think, and shouldn't be allowed to do UI/UX design.

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

most people dont follow strict formulas

He said he'll be using it so I'm curious what needs a curses-like gui if webpack spew doesn't.

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.

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

blessed is incredibly good. An absolute diamond in the rough that is the npm ecosystem.

Reply on news.ycombinator.com