From a9e46b207e7278f254db201650d52fa3f052f11e Mon Sep 17 00:00:00 2001
From: joelshejar <joel.rajesh13@gmail.com>
Date: Mon, 11 May 2026 09:24:48 +0530
Subject: [PATCH] deploy: Vercel-ready build:site that bundles docs +
 playground
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wires the playground build into the docs-site output so a single
Vercel deploy serves both:

- `tabmesh.dev/*` → VitePress docs site
- `tabmesh.dev/playground/*` → playground SPA (iframed from /playground)

Changes:

- `packages/playground/vite.config.ts`: conditional `base` — `/playground/`
  for production builds so the SPA's asset URLs resolve correctly when
  hosted under that path; `/` for dev so the Playwright e2e suite
  (hitting localhost:5173/) is unaffected.
- Root `package.json`: new `build:site` script.
  Order: build playground's deps (core/react/transport-websocket) →
  build playground (Vite SPA) → build VitePress site →
  copy playground/dist into docs/.vitepress/dist/playground/.
- `vercel.json`: build/install commands, output dir
  `docs/.vitepress/dist`, cleanUrls, no framework preset.

Verified locally:
- `pnpm build:site` produces `docs/.vitepress/dist/playground/index.html`
  with `/playground/assets/...` baked-in URLs.
- Vitest 122/122 still pass, Playwright still passes, biome clean.

What's missing before the live site works:
- Domain purchase + DNS (user step)
- Vercel project creation pointing at this repo (user step,
  vercel.json picks up the rest)
---
 package.json                       | 1 +
 packages/playground/vite.config.ts | 9 +++++++--
 vercel.json                        | 9 +++++++++
 3 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 vercel.json

diff --git a/package.json b/package.json
index 8963100..0827ed4 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
+    "build:site": "pnpm --filter '@tabmesh/playground^...' build && pnpm --filter @tabmesh/playground build && pnpm docs:build && mkdir -p docs/.vitepress/dist/playground && cp -R packages/playground/dist/. docs/.vitepress/dist/playground/",
     "biome:check": "biome check .",
     "biome:fix": "biome check --apply .",
     "biome:ci": "biome ci .",
diff --git a/packages/playground/vite.config.ts b/packages/playground/vite.config.ts
index 5f9a42c..fa5103e 100644
--- a/packages/playground/vite.config.ts
+++ b/packages/playground/vite.config.ts
@@ -1,9 +1,14 @@
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 
-export default defineConfig({
+// In production the playground is served from tabmesh.dev/playground/ (the
+// docs site iframes it). Dev keeps base `/` so the existing Playwright
+// e2e suite, which hits the Vite dev server at http://localhost:5173/,
+// is unaffected.
+export default defineConfig(({ command }) => ({
   plugins: [react()],
+  base: command === 'build' ? '/playground/' : '/',
   server: {
     port: 5173,
   },
-});
+}));
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..134ff97
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "buildCommand": "pnpm run build:site",
+  "installCommand": "pnpm install --frozen-lockfile",
+  "outputDirectory": "docs/.vitepress/dist",
+  "framework": null,
+  "cleanUrls": true,
+  "trailingSlash": false
+}