How I Built Server Cook: A Dev Server Manager for VS Code

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.

>
I couldn't see what the hell was running on my localhost. So I built my own damn tool.

Dev Server Manager VS Code TypeScript

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

1async function scanPort(port: number): Promise<boolean> {
2  return new Promise((resolve) => {
3    const server = net.createServer();
4    server.listen(port, () => {
5      server.once('close', () => resolve(false));
6      server.close();
7    });
8    server.on('error', () => resolve(true));
9  });
10}

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.

Server Cook Dashboard - Visual grid view showing all server processes with status indicators in the IDE

Mission Accomplished //

Server Cook is free and open source. Install it. Stop fighting your localhost.

The Lesson