Skip to content

deploy: Vercel-ready build:site that bundles docs + playground#23

Merged
joelshejar merged 1 commit into
mainfrom
deploy/vercel-with-playground-iframe
May 11, 2026
Merged

deploy: Vercel-ready build:site that bundles docs + playground#23
joelshejar merged 1 commit into
mainfrom
deploy/vercel-with-playground-iframe

Conversation

@joelshejar
Copy link
Copy Markdown
Member

Summary

Step 6 + 7 of the docs-site work, in one PR because they're tightly coupled. Sets up the Vercel deploy so a single project serves both the docs and the playground from `tabmesh.dev`.

What changes

Playground

  • `packages/playground/vite.config.ts` — conditional `base`:
    • Dev (`command === 'serve'`): base `/`, so the existing Playwright suite at `localhost:5173/` is unaffected.
    • Build: base `/playground/`, so when the SPA is hosted at `tabmesh.dev/playground/`, its assets resolve to `tabmesh.dev/playground/assets/...` instead of root `/assets/`.

Build orchestration

  • New root script `build:site` chains:
    1. `pnpm --filter '@tabmesh/playground^...' build` — builds core, react, transport-websocket
    2. `pnpm --filter @tabmesh/playground build` — builds the playground SPA (writes to `packages/playground/dist/`)
    3. `pnpm docs:build` — builds VitePress (writes to `docs/.vitepress/dist/`)
    4. `cp -R packages/playground/dist/. docs/.vitepress/dist/playground/` — merges the playground into the docs output

Vercel config

  • `vercel.json` — build command, install command, output directory `docs/.vitepress/dist`, cleanUrls. No framework preset because the build chain is custom.

How it routes

  • `tabmesh.dev/` → VitePress landing (`docs/index.md`)
  • `tabmesh.dev/guide/...` etc. → VitePress pages
  • `tabmesh.dev/playground` → VitePress page that iframes `/playground/index.html`
  • `tabmesh.dev/playground/index.html` → playground SPA, assets at `/playground/assets/...`

Test plan

  • `pnpm build:site` succeeds locally
  • `docs/.vitepress/dist/playground/index.html` exists with `/playground/`-prefixed asset URLs
  • `pnpm exec vitest --run` — 122/122 pass
  • `pnpm exec playwright test --grep "single WS"` — passes (dev base unchanged)
  • Biome clean

What's still needed before tabmesh.dev is live

  • Domain purchase + DNS pointing at Vercel (user)
  • Vercel project creation pointing at this repo (user — `vercel.json` picks up the rest)

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)
@joelshejar joelshejar merged commit 8a1c7ea into main May 11, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant