webdash
Orchestrate your web project with
Webdash - the customizable web dashboard
Webdash helps you visualize, monitor & manage your web project using community-driven plugins.
This project has been archived. If you're curious, check out one of my latest courses:
If you work with JavaScript, check out the fetch use cases and JavaScript projects.
Thank you! — Jad Joubran
The missing link
Webdash is the missing dashboard that bridges the gap between the developer and the terminal, resulting in a much smoother & faster workflow.
Community driven plugins
You can create your own custom plugins in Webdash.
Here are some plugins built by the community.
Package JSON
Stay on top of your installed packages and visualize your node dependencies.
- View installed packages
- View exact version installed
- Get informed on outdated packages
- Update packages in one-click
NPM Scripts
Run your frequently used npm scripts straight from the dashboard using one-click buttons.
- Quick-access your top 3 scripts
- Access secondary scripts from dropdown
- Cancel long running tasks
- View command output
PWA Manifest
Speed up your Progressive Web App workflow by previewing your Web App Manifest.
- Icon on homescreen
- Splash screen
- Status bar theme color
Performance Budget
Monitor the total size of your production JavaScript files to maintain fast performance.
- Keep track of your performance budget
- Customize your budget
- Get warned when you exceed the limit
Workbox
Generate your workbox configuration by answering questions from the wizard
- One-click install if workbox-cli is not installed
- Wizard asks you questions with smart defaults
- Shows stats about your existing service worker
Readme Preview
Preview your README.md file straight from the dashboard for a seamless experience
- Converts README.md to HTML preview
- Supports Github flavored markdown
Hue
Control your Philips hue lights straight from your dashboard
- Switch lights on/off
- Set lights' brightness
- Enable custom presets with different settings
Embed
Embed your favorite plugins or services
- Embed your favorite plugins
- Setup in seconds
Get Started
Follow these steps to start using Webdash in your front-end project.
{{npmYarnSwitch}}#webdash core (requires node >= 8){{npm}} {{install}} {{devFlag}} webdash#webdash plugins{{npm}} {{install}} {{devFlag}} webdash-package-json webdash-npm-scripts webdash-performance-budget webdash-pwa-manifest webdash-readme-preview webdash-workbox webdash-hue webdash-embed#serve{{npx}} webdash serve
Create a plugin
Using the Webdash plugin generator, you can easily create your own plugins. Follow the Create a plugin guide on GitHub.