14 ms·
Introducing Webpack Dashboard
- savanaly 10y agoHaven't tried it myself yet, but my first impression is that this looks very, very cool.
- jswny 10y agoCached: 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 https://webcache.googleusercontent.com/search?q=cache:r9y6bl... And the GitHub Repo: https://github.com/FormidableLabs/webpack-dashboard https://github.com/FormidableLabs/webpack-dashboard
- deleted 10y ago[deleted]
- dotancohen 10y agoNice, 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.
- untog 10y ago> Nice, but useless. For you, but not others.
- ycombinatorMan 10y agoWhat exactly is useful about it, I dont really feel like it would add anything to my experience.
- untog 10y agoThe GitHub page has a pretty great example: https://github.com/FormidableLabs/webpack-dashboard https://github.com/FormidableLabs/webpack-dashboard It replaces the endlessly scrolling output of webpack-dev-server with a dashboard, providing at-a-glance info.
- savanaly 10y agoWell 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.
- coldtea 10y agoIt 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.
- ixtli 10y agoSo what are the cases where "noisy and scrolly" bothers you in a way that makes it reasonable to apply blessed?
- ycombinatorMan 10y agomost people dont follow strict formulas
- ixtli 10y agoHe said he'll be using it so I'm curious what needs a curses-like gui if webpack spew doesn't.
- dotancohen 10y agoAnything 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 10y agoAh ok, so you're saying you'd use it to handle input rather than to "simplify" output spew. Fair.
- 15155 10y agoblessed is incredibly good. An absolute diamond in the rough that is the npm ecosystem.
- philip1209 10y agoTheir SSL appears broken, so if you are using "HTTPS Everywhere" you will have to circumvent to non-https.
- exogen 10y agoThis 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!
- smac8 10y agoThis 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?
- exogen 10y agoI think this will happen if you skip the "Turn off errors" part of the instructions: https://github.com/FormidableLabs/webpack-dashboard#turn-off-errors https://github.com/FormidableLabs/webpack-dashboard#turn-off... – did you catch that part?
- smac8 10y agoApparently! Thanks for linking
- thekenwheeler 10y agoYou'll want to set the webpack config option { quiet: true }
- deleted 10y ago[deleted]
- vonmoltke 10y agoWhere? 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 10y agoHow 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.
- colemannerd 10y agoYou should try and uplevel this to main webpack. It should have a dev mode that displays this.
- mfrye0 10y agoThis looks great. I'll definitely try it out.
- b34r 10y agoBecause adding GUIs to overcomplicated software with poor DUX always helps things.
- mthoms 10y agoCan anyone point me towards how to build something like this with pure bash? Is NCurses the answer?
- akerro 10y agotry tiling windows managers https://www.reddit.com/r/unixporn/top/ https://www.reddit.com/r/unixporn/top/
- i_live_there 10y agoI 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 10y agoBlessed 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
- methyl 10y agoJS 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 10y agoI 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
- cel1ne 10y agoI 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.
- theknarf 10y agoYou could always check out https://flowtype.org/ https://flowtype.org/
- rubber_duck 10y agoI 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 10y agoI'm working on overriding stdout to go to the Log panel
- rubber_duck 10y agoThank 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 10y agoLOL... 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.
- deleted 10y ago[deleted]
- BinaryIdiot 10y agoWebpack 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.
- kaoD 10y agoAFAICT 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!
- exogen 10y agoThis 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 10y agoRight 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 10y agoI 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.
- visarga 10y agoLooks great and it would be nice to have work over http too. That way the UI could be polished even more.
- Willamin 10y agoAnyone know of any atom ui packages that mimic this kind of look?