DEV Community

Zabi ullah
Zabi ullah

Posted on

How I Built a Video Downloader with $0 Maintenance Costs (Node.js + Vanilla JS)

#webdev #node #javascript #showdev

Hey everyone! 👋

I wanted to share the architecture of a side project I just finalized: VidZap, a turnkey web video downloader tool. My main goal when building this was simple: create an app that handles dynamic video parsing but requires zero expensive server setups or crushing monthly bandwidth bills for whoever hosts it.

Here is a breakdown of how the architecture works and how you can build or deploy something similar.

🏗️ The Hybrid Architecture Split

To keep hosting costs at absolute zero, the platform uses a decoupled structure:

  1. The Frontend Layer (Static SEO Silo): Built with raw HTML5, CSS3, and Vanilla JavaScript. Home page as (index.html)


  1. The Backend Layer (Asynchronous Processing Core): A lightweight Express.js Node app that runs locally or on a cheap VPS instance.

🔒 Securing the Backend Against Shell Injections

When dealing with video extraction engines like yt-dlp, a common mistake is using Node’s exec(), which leaves the server wide open to command injections via malicious URL inputs.

To fix this, I strictly implemented execFile to pass inputs directly as an isolated array of arguments:

const { execFile } = require("child_process");

app.post("/download", (req, res) => {
  const { url } = req.body;

  // Clean URL parsing and classification checks here...

  // Securely passing args directly to the binary
  execFile("yt-dlp", ["-j", "--no-playlist", url], { maxBuffer: 1024 * 1024 * 10 }, (error, stdout, stderr) => {
    if (error) return res.status(500).json({ success: false, error: "Extraction failed" });

    const info = JSON.parse(stdout);
    // Slices stream formats to grab progressive audio/video formats
    const formats = info.formats || [];
    const best = formats.reverse().find(f => f.vcodec !== "none" && f.acodec !== "none" && f.url);

    res.json({
      success: true,
      title: info.title,
      thumbnail: info.thumbnail,
      downloadUrl: best?.url || info.url
    });
  });
});
Enter fullscreen mode Exit fullscreen mode

⚙️ Making It Completely Modular with Environment Variables

To make this completely turnkey for deployment, I extracted all server properties out into a clean .env file management layer using dotenv. This allows the application to toggle modes effortlessly:

  • Self-Hosted Mode: Runs raw local server processing out-of-the-box.
  • Cloud Scaling Mode: Features built-in optional endpoints to instantly reroute incoming download data packets through RapidAPI if traffic heavily spikes.

📦 Want the Ready-to-Deploy Source Code?

I have fully packaged this codebase (frontend/ and video-backend/ paths), stripped out my personal testing keys, and added full markdown installation documentation.

If you are looking to launch your own micro-traffic project, study a full-stack codebase, or just want a ready-made script to customize, I've listed it as a launch special on Gumroad for just $19 for the first 5 developers.

👉 Grab the Full Turnkey Source Code on Gumroad Here

Let me know what you think of this architecture or if you have any questions about the execFile or stream selection logic below! 👇

Top comments (0)