Real Screenshots, Zero Leaks: My Disposable Demo Lab

The demo lab wants to be the cheapest, most deletable thing you can make. On Proxmox that’s an LXC container — I covered the general recipe in creating your first LXC container. A VM, a spare mini PC, or a cloud VPS all work equally well. The only requirements: Docker installed, reachable from the machine where you’ll run the capture script, and no connection to anything real. No mounts from your NAS, no credentials from your password manager, no real DNS names.

That last part is the whole trick. Sanitizing screenshots after the fact means hunting for leaks in pixels; building the environment from dummy values means there’s nothing to hunt. Safety by construction beats safety by inspection.

Inside the container, a single Docker Compose file runs the cast: Homepage as the dashboard, Grafana with Prometheus behind it, and Uptime Kuma doing up/down checks — the same stack from my first Docker Compose stack walkthrough, wearing a costume.

Seed every config with the dummy identity and nothing else. Hostname labels like pve-node1.homelab.lan, addresses from 10.0.0.x, the admin user youradmin. When a Homepage widget wants a “server” to display, it gets a fake one. It feels silly typing in a made-up network — but that made-up network is exactly what makes every future capture publish-safe.

One detail pays off later: when Uptime Kuma needs to monitor its stack-mates, point it at Compose service names, not localhost. Compose puts every service on a shared network where each container is reachable by its service name through a built-in DNS — so a monitor URL like http://homepage:3000 works, survives container restarts, and reads perfectly in a screenshot. A localhost URL, on the other hand, points at Kuma’s own container and quietly fails forever. I learned that the embarrassing way and wrote it up in the Docker localhost trap.

A freshly deployed dashboard looks freshly deployed: empty graphs, stubby uptime bars, suspicious perfection. The fix costs nothing — walk away.

Uptime Kuma builds each monitor’s heartbeat bar from its check history, so at a 20-second interval a full-width bar accrues in about 17 minutes. Grafana panels querying Prometheus want longer; I let the stack idle for a day so the 24-hour views show genuine curves with genuine wobble. This waiting is what separates “real screenshot” from “technically-not-a-mockup.” The pixels you’re waiting for can’t be faked quickly, and readers’ eyes know it.

The script uses Puppeteer — the Chrome team’s browser-automation library — in its puppeteer-core flavor. The difference matters on a laptop: the full puppeteer package downloads its own private copy of Chrome, while puppeteer-core downloads nothing and drives a browser you point it at with an explicit executable path. Since my machine already has Chrome, the whole dependency is one small npm package.

Modern Chrome also makes the “headless” part boring, in the best way: headless and headful are now the same unified browser, not the separate stripped-down implementation of years past — so what the script captures is what a reader’s actual Chrome would render.

import puppeteer from 'puppeteer-core';

const browser = await puppeteer.launch({
executablePath: '/usr/bin/google-chrome',
headless: 'new',
args: ['--no-sandbox', '--disable-gpu',
       '--force-device-scale-factor=2', '--hide-scrollbars'],
});

const page = await browser.newPage();
await page.setViewport({ width: 1600, height: 700, deviceScaleFactor: 2 });
await page.goto('http://$DEMO_HOST:3000/', { waitUntil: 'networkidle2' });
await new Promise(r => setTimeout(r, 4000)); // widgets hydrate
await page.screenshot({ path: 'homepage-dashboard.png' });

Two choices in there carry most of the quality:

• deviceScaleFactor: 2 renders at double pixel density, so the PNG stays crisp when the site serves it on high-DPI displays.
• The viewport is sized to the content, not to a monitor. A 1000-pixel-tall capture of a 500-pixel-tall UI is half blank background inside the frame. My targets each get their own height — 700 for Homepage and Prometheus, 640 for Kuma, 1000 for a full Grafana dashboard.

Grafana and Uptime Kuma sit behind login screens, so the script types the demo credentials into the form fields, submits, waits for the app to settle, then navigates to the page worth photographing. For Grafana that’s a dashboard URL with an explicit time range (from=now-24h&to=now) — pinning the range means re-running the script next month produces the same framing. Then a deliberate pause: Grafana needs several seconds to run its panel queries and draw, and a screenshot taken too eagerly captures spinners instead of graphs.

There’s a companion script for seeding Uptime Kuma itself (kuma-admin.mjs), because clicking “add monitor” eight times per rebuilt demo lab gets old. Kuma has no REST API for this — its REST endpoints are read-only, and write access remains an open feature request — while the web UI talks to the server over socket.io. So the script speaks that protocol directly: connect, authenticate, emit add events for each monitor. One hard-won detail from building it: the version I ran (Uptime Kuma 2) pushes its monitor list during login, so a listener attached after login has already missed the event and waits forever. Attach first, then log in. That one cost me a hung script and a debugging loop.

Before any capture is committed, three checks, in order:

1. Eyeball every image at full size. Not thumbnails — actual size. You’re looking for anything you didn’t deliberately plant: a hostname in a corner, a browser autofill, a notification toast.
2. Run the repo’s security scan, which greps for the real subnets, usernames, and domains that must never appear. The scan is the backstop; the dummy-valued environment is why it comes up empty.
3. Confirm the visible URLs tell the dummy story. Kuma’s monitor URLs read http://homepage:3000 — a service name, leaking nothing. The browser-chrome frame around each embedded image gets a hand-written dummy URL, never the capture address.

Then the images land in the post through a small Screenshot component that wraps each one in a browser-style frame with a caption. And when the shot list is done, the demo lab is deleted. Rebuilding it later from the compose file and the seeding script takes minutes — the scripts are the lab; the container is just where they ran last.