Running a Real Linux OS on a Vercel-Hosted Website: A WebAssembly Miracle

Important

Disclaimer: This research and architecture represents a revolutionary paradigm shift in serverless deployment, decoupling operating system execution from centralized hypervisors and hosting it 100% on the edge and client.

Have you ever wondered if you could run a real, fully interactive Linux OS on a Vercel serverless application? Most developers would immediately say no. After all, Vercel is a platform designed for static hosting and stateless Serverless/Edge Functions. It has no persistent background virtual machines, a read-only filesystem (except for a tiny temporary /tmp), strict CPU and memory limits, and a maximum execution timeout of a few seconds.

Yet, by combining the power of WebAssembly (Wasm) with a high-performance content delivery network, we can achieve the seemingly impossible: a fully functional, bootable Linux operating system running on a Vercel-hosted site.

Here is how we design and build this architectural miracle.

⚡ The Core Technical Architecture

To bypass Vercel's backend execution limits, we flip the server-client model on its head. Instead of running a virtual machine on a Vercel server, we use Vercel's global CDN to distribute lightweight, pre-compiled hardware emulator assets and run the CPU emulation directly in the browser using WebAssembly.

+-------------------------------------------------------------+
|                     User's Web Browser                      |
|                                                             |
|   +-------------------+          +---------------------+    |
|   |   React Front-End |          |   v86 Wasm Engine   |    |
|   |  (Terminal View)  |<-------->| (x86 CPU Emulator)  |    |
|   +-------------------+          +----------+----------+    |
|                                             |               |
+---------------------------------------------|---------------+
                                              | Requests Sectors
                                              v (HTTP Range)
                             +--------------------------------+
                             |       Vercel Edge CDN          |
                             |  - Minimal Linux Kernel (~5MB) |
                             |  - Custom Initramfs RootFS     |
                             |  - BIOS & Hardware binaries    |
                             +--------------------------------+

We utilize v86, an open-source x86 hardware emulator compiled into WebAssembly. It emulates:

  • An x86 Pentium-compatible CPU (with a browser-based dynamic translation/JIT engine)
  • A serial console interface (which we pipe directly to our TerminalView component)
  • RAM, IDE controllers, and basic PCI hardware

🛠️ Step-by-Step Implementation Guide

To implement this on a Next.js / Vercel codebase, follow this structural blueprint:

1. Download and Place OS Assets

Create a dedicated folder /public/os/ to host the compiled hardware binaries and operating system files. We require:

  1. libv86.js and v86.wasm: The core execution engine.
  2. bios.bin and vgabios.bin: Legacy hardware setup binaries.
  3. vmlinuz-virt: A lightweight virtualized Linux kernel (preferably from the Alpine Linux virt package, stripped down to ~5MB).
  4. initrd.img: A custom ramdisk (initramfs) containing BusyBox and initial boot files.

2. Craft the React Integration

Create a dedicated component <LinuxVM /> to load the emulator script and spin up the virtual machine:

import React, { useEffect, useRef } from 'react';
import Script from 'next/script';

export default function LinuxVM() {
  const terminalRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleInit = () => {
      if (!(window as any).V86Starter || !terminalRef.current) return;

      const emulator = new (window as any).V86Starter({
        wasm_path: '/os/v86.wasm',
        memory_size: 64 * 1024 * 1024, // 64MB of RAM is ample for CLI Alpine
        bios: { url: '/os/bios.bin' },
        bzimage: { url: '/os/vmlinuz-virt' },
        initrd: { url: '/os/initrd.img' },
        autostart: true,
        serial_container: terminalRef.current,
      });
    };

    document.addEventListener('v86-ready', handleInit);
    return () => document.removeEventListener('v86-ready', handleInit);
  }, []);

  return (
    <div className="vm-wrapper">
      <Script 
        src="/os/libv86.js" 
        onLoad={() => document.dispatchEvent(new Event('v86-ready'))} 
      />
      <div ref={terminalRef} className="linux-serial-console" />
    </div>
  );
}

🪐 The Ultimate Milestone: Internet Access & Network Tunneling

Running a sandboxed Linux VM is cool, but a network-enabled Linux VM is absolutely revolutionary.

Because browser-level scripts cannot establish raw TCP/UDP socket connections directly due to CORS and browser sandbox constraints, we route all network traffic through a WebSocket Proxy:

  1. Inside the Alpine VM, we configure a virtual network card (ne2k or virtio) with a simple SLIRP or TUN interface.
  2. The v86 emulator intercepts all outgoing Ethernet frames and sends them over a WebSocket connection to a proxy backend server.
  3. The proxy backend receives the raw frames, unwraps the TCP/IP packets, and routes them to the real internet.
  4. Incoming responses are wrapped back into Ethernet frames, sent over the WebSocket back to v86, and injected directly into the Linux VM's network card.

Using this architecture, you can open your browser-native Linux VM and run:

/ # apk update && apk add python3 curl
/ # curl https://api.github.com/users/aharshit123456

This boots and runs entirely within the client's memory, pulling dependencies and making API requests in real time!

🏆 Summary: Why You Should Build This

Building a browser-native OS hosted on Vercel is the ultimate flex for a developer portfolio. It combines:

  1. Deep Systems Programming: Understanding Linux kernels, initial ramdisks, and hardware virtualization.
  2. Cutting Edge Web Technologies: WebAssembly, WebWorkers, high-performance serial communication, and WebSocket tunneling.
  3. Immersive UX: Giving visitors a real, fully bootable shell rather than a basic, hardcoded CLI mock.

It is 100% serverless, 100% free to host, and runs at near-native speeds. It's time to build the future of browser-native computing.