One-Click Project Execution with My New VS Code Extension

Every developer knows this moment.

You clone a project.
Open it in VS Code.
And then comes the pause.

“How do I run this?”

You check the README.
You scroll.
You try one command. It fails.
You try another.

npm run dev
npm start
flask run
python manage.py runserver
uvicorn main:app --reload

Same goal.
Different rituals.

After switching between JavaScript and Python projects for long enough, I realized something:

This problem isn’t about learning.
It’s about unnecessary friction.

So I built a VS Code extension to remove it.

---

The Real Problem: Cognitive Load

Modern development isn’t hard because frameworks are bad.
It’s hard because every framework solves the same problem differently.

• React (Vite) → npm run dev

• Next.js → npm run dev

• Angular → npm start

• Flask → flask run

• Django → python manage.py runserver

• FastAPI → uvicorn main:app --reload

When you work across stacks, your brain becomes a command cheat sheet.

That’s wasted energy.

Computers are good at detecting patterns.
Humans shouldn’t have to remember them.

---

The Idea: VS Code Should Handle This

Instead of asking developers to remember commands, I asked a different question:

What if VS Code could detect the project and run it for you?

That idea became WebRun.

A simple VS Code extension:

• Open a project

• Click ▶️

• The correct dev server starts automatically

No config.
No cloud.
No telemetry.

---

How WebRun Works (No Magic Involved)

WebRun doesn’t use AI or heuristics pulled from the sky.
It follows clear, deterministic signals—the same ones developers use mentally.

1. package.json comes first

Dependencies and scripts reveal most frontend and Node.js projects:

• Vite

• Next.js

• CRA

• NestJS

• Express / Fastify

2. Framework config files

Files like:

• vite.config.js

• next.config.js

• angular.json

Frameworks announce themselves clearly if you look.

3. Python project signals

• manage.py → Django

• requirements.txt + app.py → Flask

• main.py → FastAPI

4. Folder structure

Common full-stack layouts:

frontend/ + backend/
client/ + server/
web/ + api/

When detected, WebRun starts both servers in separate terminals.

5. Safe fallbacks

Because real projects are messy.

Once the project type is identified, WebRun maps it to the correct dev command and runs it inside the integrated terminal.

---

What WebRun Supports Today

• Frontend: React, Next.js, Vue, Angular, Svelte, Astro

• Backend (Node): Express, Fastify, NestJS

• Backend (Python): Flask, Django, FastAPI

• Static HTML/CSS/JS

• Full-stack folders

All with one click.

---

What I Learned Shipping This

Shipping WebRun taught me more than building it.

1. Distribution matters more than perfect code

Great tools with zero users don’t exist.

2. Docs are part of the product

If users can’t understand it in 30 seconds, they uninstall.

3. Auto-detection beats configuration

Every setting is a chance for drop-off.

4. Open source builds trust faster than marketing

MIT license + readable code = calm contributors.

5. Small, focused tools ship

WebRun does one job:

run the project

That focus saved weeks.

---

Open Source & Links

WebRun is completely open source and MIT licensed.

• VS Code Marketplace:
  https://marketplace.visualstudio.com/items?itemName=codewithmishu.webrun

• GitHub Repository:
  https://github.com/CodeWithMishu/WebRun

Contributions, feedback, and edge cases are welcome.

---

Final Thoughts

WebRun isn’t trying to replace the terminal.
It’s trying to remove unnecessary thinking from daily workflows.

If developers repeat something every day,
computers should automate it.

If you’re building a dev tool:

• Ship early

• Learn in public

• Listen harder than you talk

That’s how WebRun came to life.