Modern Web VPS Stack
A route-first modern web stack: TanStack Router/Start + Tailwind CSS + Vite/Rolldown for the app, Hetzner for predictable server ownership, and Cloudflare for edge, DNS, tunnels, security, and selective serverless services.
Use this when the goal is not "pick the default SaaS template" but "own the app/runtime shape while still using current frontend primitives." It is an alternative to the SaaS Stack 2026 Vercel/Next/Supabase default, not a blanket replacement.
Concept Position
The durable idea is separation of concerns:
| Layer | Default route | Why |
|---|---|---|
| App contract | Tools/Tanstack | TanStack Router / Start |
| Styling | Tailwind V4 Style | Tailwind CSS V4 |
| Build toolchain | Skills/Engineering/Vite | Vite + Rolldown |
| Runtime compute | Skills/Engineering/Hetzner | Hetzner Cloud VPS/server |
| Edge and service layer | Tools/Cloudflare | Cloudflare |
| Optional control plane | Coolify | Use Coolify on Hetzner when push-to-deploy, databases, env vars, previews, and one-click services matter more than a minimal Docker/systemd setup. |
Architecture Shapes
| Shape | Use when | Sketch |
|---|---|---|
| Hetzner app behind Cloudflare | You want a normal Node/server runtime with owned compute and Cloudflare as the public edge. | Cloudflare DNS/WAF/CDN/Tunnel -> Hetzner VPS -> TanStack Start Node output -> Postgres/Redis/services |
| Cloudflare Workers app | The app fits the Workers runtime and benefits from global deployment with Cloudflare bindings. | Cloudflare Workers -> TanStack Start Workers output -> D1/KV/R2/Queues/Hyperdrive |
| Hybrid | Core app wants VPS semantics, while edge APIs, queues, storage, AI, or auth-adjacent work belongs near users. | Hetzner app + Cloudflare Workers sidecars + R2/KV/Queues/Hyperdrive |
Cloudflare has first-party docs for TanStack Start on Workers, including wrangler deploy detection of Start output, and the Cloudflare Vite plugin explicitly supports TanStack Start with SSR. Source: Cloudflare TanStack Start and Vite plugin docs, 2026-07-06
Decision Matrix
Choose this stack when:
- predictable VPS cost and operational control beat zero-ops convenience
- the app wants a typed route tree, URL-state discipline, loaders, SSR, streaming, and explicit server functions
- Cloudflare should be the edge/security/network/services layer, but the core app should not be forced into Workers
- the app should remain portable across Node, Workers, Railway, Netlify, or another host
- a single server plus Cloudflare services can simplify the first production system
Prefer Workers-only when the app fits the edge runtime and Cloudflare bindings are the natural data/control plane. Prefer Vercel/Next when the project wants the Next ecosystem, Vercel platform defaults, and lower ops burden. Prefer managed Postgres/Supabase/Neon/PlanetScale when database operations are not worth owning.
Operational Guardrails
- Pin moving packages, especially TanStack Start while it is RC and any fast-moving toolchain packages. TanStack's production checklist explicitly says to lock Start/Router packages and track release notes. Source: TanStack Start, 2026-07-06
- Treat Hetzner as production infrastructure: confirm account, project, region, server name, and production status before any mutation; inspect servers, firewalls, networks, SSH keys, volumes, snapshots, and floating IPs before changes.
- Keep ingress closed by default. Hetzner firewalls restrict traffic, and Cloudflare Tunnel's outbound-only model can let the origin block inbound traffic except the intended path. Source: Cloudflare Tunnel docs, 2026-07-06
- Use SSH keys, not password login. Make backups and restore tests explicit. Hetzner backups are automatic disk copies; snapshots are manually initiated disk copies. Source: Hetzner backup/snapshot docs, 2026-07-06
- Keep Cloudflare Quick Tunnels for development only. Production should use named/remotely managed tunnels or normal DNS/origin routing.
- Run app verification at the route level: typecheck route contracts, smoke loaders/server functions, test SSR/streaming behavior, and browser-check the critical paths.
Version Snapshot
Checked 2026-07-06 against the npm registry:
| Package | Latest | Published |
|---|---|---|
@tanstack/react-router |
1.170.17 |
2026-07-01 |
@tanstack/react-start |
1.168.27 |
2026-07-01 |
@tanstack/router-plugin |
1.168.19 |
2026-07-01 |
vite |
8.1.3 |
2026-07-02 |
rolldown |
1.1.4 |
2026-07-01 |
tailwindcss |
4.3.2 |
2026-06-29 |
@tailwindcss/vite |
4.3.2 |
2026-06-29 |
wrangler |
4.107.0 |
2026-07-02 |
@cloudflare/workers-types |
5.20260706.1 |
2026-07-06 |
Do not float production dependencies on broad ranges just because the stack is fashionable. This page is an architecture route, not a permission slip to ship unpinned RC infrastructure.
Nearby Pages
- SaaS Stack 2026 is the managed-community default: React/Next/Tailwind/shadcn, Node, Clerk/NextAuth, Supabase/PlanetScale/Neon/Turso, Stripe, Vercel/Railway/Render.
- Frontier Stack 2026 is the design/frontend craft stack: Tailwind tokens, Motion, GSAP, R3F/OGL, json-render, Plate, component sources, and interaction decisions.
- Cloudflare Ecosystem owns Cloudflare as an ecosystem route, including Workers, D1, KV, R2, Queues, Hyperdrive, tunnels, and startup credits.
- Coolify owns the self-hosted PaaS path when the VPS should have a productized control plane.
- hetzner is the executable Hetzner operation skill. Load it before touching real Hetzner infrastructure.
Timeline
- 2026-07-06 | Created the Modern Web VPS Stack route for TanStack Router/Start, Tailwind, Vite/Rolldown, Hetzner, and Cloudflare after Kevin asked to capture the current "modern web practices" stack and self-host/VPS deployment shape. Source: User request, official docs, npm registry, 2026-07-06