Introducing Electron Webpack Dashboard

August 16, 2017

Everything is magic, except to the magician.

One year ago yesterday, I released webpack-dashboard. It ended up getting a lot more popular than I thought it would! As it turns out, everyone wants to pretend like they are working at NASA.

Shortly after releasing it, and selling it under the guise of it feeling like working at NASA, I came to find out that NASA actually has their own dashboard lib, and it's a lot better than mine. Check it out here: https://github.com/nasa/openmct.

One interesting thing about their dashboard though, is that it is web based. So that, coupled with a TON of frustration trying to make the terminal dashboard work on the incredible variety of terminal environments, led me to create an Electron, web-tech based version. Think less 50's NASA, and more Westworld.

I tweeted some teasers and people seemed pretty excited, so I stayed up until 3:30am the last few nights and got a beta version ready to put out. Today, that beta is yours:

https://camo.githubusercontent.com/8b8db5496a4acb0958237967fcc55c75e351f215/687474703a2f2f692e696d6775722e636f6d2f39544f624e724e2e706e67

Features

Lets start with the main display:

  • Log - The first panel is the webpack log panel where you can see build ouput.
  • Operations - The operations panel shows circular build progress, error counts, build status, total module size and total asset size.
  • Modules - The modules panel shows the modules used in the bundle and their sizes.
  • Assets - The assets panel shows the assets produced by the build, with the JavaScript bundles displaying minified and gzipped sizes, along with warnings for bundle size limits.
  • Problems - The problems panel shows you problems such as version skews or duplicates.

Next up, we have an eye icon in the top right. Clicking that brings you to the Visualization panel.

https://i.imgur.com/cDZdKtP.png

This allows you to take a graphical look at your bundle composition, and see where bloat may be coming from.

Check out the dashboard in action:

https://imgur.com/GOJ0RJr.gif

Future

One obvious goal for the future is to get this thing out of beta. That said, the switch to web based technology opens the door to faster iteration and really impressive features. One goal is to provide a wider set of best practices and common errors to validate against.

In the next few versions leading up to 1.0, expect: better and more visualizations; Lodash specific warnings; warnings that go beyond size, version skews, and duplicates; and better support for different configurations.

Give it a try now at:

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

Thanks

Big shouts out to Jon Cooper for the design and Tyler Thompson for the additional plugin logic.

Also, a wholehearted shout out to Ramin Djawadi, composer of the Westworld soundtrack, which has powered this release.

Related Posts

Rust vs Go: Which Is Right For My Team?

August 29, 2024
In recent years, the shift away from dynamic, high-level programming languages back towards statically typed languages with low-level operating system access has been gaining momentum as engineers seek to more effectively solve problems with scaling and reliability. Demands on our infrastructure and devices are increasing every day and downtime seems to lurk around every corner.

A Rare Interview With A Designer who Designs Command-line Interfaces

May 13, 2024
For years, terminal and command-line applications have followed a familiar pattern: developers identify a need, code a solution, and release it for free, often as open-source software.

The Evolution of urql

December 6, 2022
As Formidable and urql evolve, urql has grown to be a project that is driven more by the urql community, including Phil and Jovi, than by Formidable itself. Because of this, and our commitment to the ethos of OSS, we are using this opportunity to kick off what we’re calling Formidable OSS Partnerships.