Warm64

Quick start in a web page

A page and a worker that boot Linux and show its console, in about forty lines.

This page boots Alpine Linux in a web worker and shows its console in the page.

Files

Serve these from one directory, with the Warm64 package's dist/ and wasm/ directories and Alpine's netboot vmlinuz-virt and initramfs-virt (see Quick start in Node) beside them:

index.html
worker.js
dist/          from the warm64 package
wasm/          from the warm64 package
vmlinuz-virt
initramfs-virt

Any static server works, for example python3 -m http.server 8080.

The worker

worker.js
import { WEMU, browserWEMUHost } from "./dist/index.js";

const vm = await WEMU.launch(
  "-m 1G -S -display none -kernel vmlinuz-virt -initrd initramfs-virt -append console=ttyAMA0",
  browserWEMUHost({ base: new URL("./", location.href) }),
);
vm.serial[0].onData((bytes) => postMessage(bytes));
onmessage = ({ data }) => vm.serial[0].write(data);
await vm.qmp("cont");

The page

index.html
<!doctype html>
<meta charset="utf-8">
<title>Warm64</title>
<pre id="out" style="height: 80vh; overflow: auto"></pre>
<input id="in" placeholder="Type a command and press Enter" autofocus>
<script type="module">
  const out = document.getElementById("out");
  const input = document.getElementById("in");
  const decoder = new TextDecoder();
  const worker = new Worker("worker.js", { type: "module" });

  worker.onmessage = ({ data }) => {
    out.textContent += decoder.decode(data, { stream: true }).replace(/\r/g, "");
    out.scrollTop = out.scrollHeight;
  };
  input.addEventListener("keydown", (e) => {
    if (e.key !== "Enter") return;
    worker.postMessage(input.value + "\n");
    input.value = "";
  });
</script>

Open the page: the kernel's messages appear, then a ~ # prompt. Type uname -a and press Enter.

Tip For a real terminal, with colours, cursor movement and every key, connect the worker to a terminal widget such as xterm.js instead of a <pre>.

Next steps