Why I Built a Dev Server Manager (The Rant)
I was working on my projects, switching between VS Code and Cursor like a maniac, and I got absolutely fed up with one thing: I couldn't see what the hell was running on my localhost. No dev server manager. No visual overview. Nothing.
You know the drill. You're running a Next.js app on port 3000, a React app on 3001, maybe a Vite project on 5173, and suddenly you're sitting there like an idiot wondering: "Is port 3000 free? What's actually running right now?"
Fuck that noise.
So I did what any self-respecting developer does when they're pissed off: I yelled at my screen for 5 minutes, then I built my own damn tool.
Dev Server Manager VS Code TypeScript>I couldn't see what the hell was running on my localhost. So I built my own damn tool.
The Problem (The Real One)
Here's what was driving me crazy:
- No visual overview - I had to manually check ports or remember what I started
- Multiple terminals - Each server in its own terminal window, cluttering my workspace
- Port guessing - "Is 3000 free? Let me try 3001. Oh wait, that's taken too."
- No quick controls - Want to stop a server? Find the terminal, kill the process, hope you got the right one
Seriously? In 2024, we're still managing dev servers like it's 2010?
The Pain Was Real //
No dev server manager existed that showed me everything in one place. I had to build it.
Fine. I'll Do It Myself.
When something doesn't exist and you need it, build it yourself.
I wanted a visual dashboard right inside VS Code that shows me:
- All running servers at a glance
- Port numbers clearly displayed
- One-click start/stop controls
- Real-time status updates
That's it. No configuration. No setup. Just works.
The Build
The Stack
I went with:
- TypeScript - Because I'm not a masochist
- VS Code Extension API - The official way to build extensions
- Node.js - For port scanning and process management
The Core Features
1. Port Scanner
First thing: detect what's actually running. I scan common dev ports (3000, 3001, 5173, 8080, etc.) and check if they're in use.
typescript
2. Visual Dashboard
The dashboard shows everything in one place. Green = running. Red = stopped. Simple.
3. Start/Stop Controls
Click "Start" → Server launches. Click "Stop" → Server dies. No terminal hunting.
4. Auto-Refresh
Every 3 seconds, the dashboard updates. You always see the real status.
The Painful Part
VS Code Extension API documentation is... let's say "comprehensive but not always clear."
I spent way too long figuring out:
- How to create a custom view in the sidebar
- How to update the UI reactively
- How to manage child processes properly
But you know what? I figured it out. Because that's what you do when you're building something you actually need.
>When something doesn't exist and you need it, build it yourself.
The Result
Server Cook is now live on the VS Code Marketplace. A dev server manager that actually works.
It does exactly what I needed:
- ✅ Visual dashboard of all servers
- ✅ Automatic port detection
- ✅ One-click start/stop
- ✅ Real-time status updates
- ✅ Works with any dev server (Next.js, React, Vite, Angular, you name it)
That's it. Just works.
System Overview
Mission Control for Localhost
Get a bird's-eye view of all your servers in a beautiful grid layout. See status, ports, and URLs at a glance with one-click controls.

Mission Accomplished //
Server Cook is free and open source. Install it. Stop fighting your localhost.
The Lesson
When something doesn't exist and you need it, build it yourself.
Don't wait for someone else to solve your problem. Don't complain about it for months. Get pissed. Get motivated. Build it.
>Get pissed. Get motivated. Build it.
Mission accomplished. 🎉
