docs: add deployment guide for Vercel and Cloudflare templates#653
docs: add deployment guide for Vercel and Cloudflare templates#653jrusso1020 merged 3 commits intomainfrom
Conversation
Surfaces the two official one-click deployment templates (heygen-com/hyperframes-vercel-template, heygen-com/hyperframes-cloudflare-template) in the docs site. Previously they only existed as GitHub READMEs. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
| @@ -0,0 +1,146 @@ | |||
| --- | |||
| title: Deploy | |||
| description: "Run a Hyperframes preview + render API on Vercel or Cloudflare with one click." | |||
There was a problem hiding this comment.
do we want to name every provider here is this best practice?
There was a problem hiding this comment.
Reworded in 34c01b2 — frontmatter now reads "Run a Hyperframes preview + render API in the cloud from a one-click template." and the intro paragraph drops the "deploy in one click" phrasing. The provider names stay in the comparison table and tabs where they belong.
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Workflows to automatically generate PRs for you. |
jrusso1020
left a comment
There was a problem hiding this comment.
Verdict
Comment / would-approve — net-positive ship (GitHub blocks self-approval, otherwise this would be Approve+comments). The doc is internally consistent and matches the upstream READMEs. One factual misattribution worth fixing pre-merge; everything else is style/framing.
Key Concerns
docs/guides/deploy.mdx:58— Cloudflare perf number is misattributed. The~25sfigure in the Cloudflare README comes fromnode scripts/test-render.mjsagainst a local Docker container on a 6-vCPU host, not from a deployed Cloudflarestandard-4(4 vCPU) instance. As written, the doc implies the 25s is the production number on standard-4. Either (a) drop the perf number from the Cloudflare tab, (b) qualify it as "in local Docker on a 6-vCPU host", or (c) replace with an actual standard-4 measurement if you have one.docs/guides/deploy.mdx:3— frontmatter description names two specific providers. Author already flagged this inline. Agree —"Run a Hyperframes preview + render API on Vercel or Cloudflare with one click."ties the description to the current two templates and reads vendor-y. Other guides describe the capability (e.g. rendering.mdx: "Render compositions to MP4, MOV, or WebM locally or in Docker"). Suggest something like"Run a Hyperframes preview + render API in the cloud with one click."and let the body name brands.
Test Coverage
Docs-only PR. Manual verification needed:
- Mintlify preview renders
<Tabs>,<Steps>,<CardGroup>,<Note>correctly and the new entry shows up under Guides - Both deploy buttons (Vercel and Cloudflare) actually clone/provision when clicked
- File paths cross-checked against template repos:
lib/preview.ts✓ (Vercel),scripts/test-render.mjs✓ (Cloudflare),scripts/build.mjs,app/page.tsx,public/index.htmlall match the READMEs.
Nits / Future
docs/guides/deploy.mdx:6— "deploy in one click" is slightly aspirational for Cloudflare, which requires a Workers Paid plan first (the doc itself notes this in the Cloudflare tab). Could soften to "deploy with a single button."- Architecture diagram (lines 74–85) — the dangling arrow to "Vercel Blob / Cloudflare R2" is hanging off the Function box without a return arrow back, which is fine, but the body text says the function returns a URL after upload. Could clarify: the URL returned to the browser points at the blob/R2 object. Minor.
- Vercel deploy button URL (line 25) — strips the
demo-title/demo-description/demo-imagequery params that the upstream README's button uses. They're not required for the clone to work, but the marketplace listing context is lost. Either way is fine. - Self-review on a docs PR — fine, just flagging that the only prior approval signal is from the author. A second pair of eyes (designer or DX) before merging would be worth it for the framing call (single-page vs split-per-template) since it sets the precedent for future templates.
- Reword frontmatter description to describe capability, not providers - Soften "deploy in one click" — Cloudflare requires Workers Paid plan - Qualify Cloudflare ~25s perf number as a local-Docker measurement on a 6-vCPU host, not a standard-4 production figure Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
Addressed review feedback in 34c01b2:
Skipped the architecture diagram + Vercel button URL nits (purely cosmetic). Happy to revisit either if you want. |
Remove dollar amounts, render-time figures, and credit allowances from the Vercel/Cloudflare tabs. These were sourced from the template READMEs but go stale fast (pricing changes) and are load-bearing on a single composition's quirks (perf isn't proportional to duration). Keep qualitative framing and link out to the canonical pricing pages instead. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
Dropped specific numbers in ea1637c. Both Performance + Pricing sections now describe the shape ('renders run on standard-4', 'bills per-10ms') and link to the canonical pricing pages — no dollar amounts or render-time figures to maintain in our docs. |
miguel-heygen
left a comment
There was a problem hiding this comment.
Docs-only PR, thorough verification below. Looks good to ship.
What I checked:
- Both template repos exist and are accessible (
heygen-com/hyperframes-vercel-template,heygen-com/hyperframes-cloudflare-template). - Internal doc links all resolve:
/packages/player->docs/packages/player.mdx,/packages/cli->docs/packages/cli.mdx,/guides/rendering->docs/guides/rendering.mdx,/concepts/determinism->docs/concepts/determinism(in docs.json). - Deploy button URLs decode correctly — Vercel button clones the right repo with blob store config, Cloudflare button points at the right repo.
ui-3d-revealcomposition exists in the registry (registry/blocks/ui-3d-reveal/).hyperframes render --dockerflag exists in the CLI source and is documented in the rendering guide.- Nav placement in
docs.jsonis logical — right afterguides/rendering(local render -> cloud deploy). - Frontmatter description follows the pattern of other guides (capability-focused, not vendor-specific), consistent with the follow-up commit fix.
- All CI checks pass, including
Validate docsandMintlify Deployment. - No secrets, env vars, or credentials exposed.
BLOB_READ_WRITE_TOKENis correctly described as auto-injected by Vercel, not hardcoded. - Mintlify components (
<Tabs>,<Steps>,<CardGroup>,<Note>) are used consistently with other guides in the repo. - External links to Vercel/Cloudflare docs use canonical URLs.
The three follow-up commits cleanly address the earlier review concerns (vendor-neutral description, dropping unverified perf/pricing numbers). No issues found.
vanceingalls
left a comment
There was a problem hiding this comment.
Verdict: Approve. Scoped pure-docs PR. Cross-checked every load-bearing claim against both template repos and the existing docs nav — nothing is wrong. Ship it.
Praise
- Single-page approach is the right call. Vercel and Cloudflare templates share ~80% of the surface (preview UI,
/api/render, pre-baked renderer, swap-the-composition flow). Splitting into two pages would have meant maintaining two copies of the same architecture diagram and the same "swap the composition" section. Easier to keep accurate as one page. - Honest about platform choice. The two
<Note>callouts ("Vercel Functions can't fit Chromium + FFmpeg → Sandbox", "Cloudflare Browser Rendering can't install FFmpeg → Containers") explain why each template uses the primitive it does, which is the question a thoughtful reader will ask. Saves a Slack thread later. - Good response to prior review feedback in the commit history: dropped specific dollar amounts and render-time figures (those go stale fast and aren't proportional across compositions anyway), qualified the Cloudflare Workers Paid requirement, softened "deploy in one click."
- "When to use a template vs. roll your own" section sets expectations correctly — templates are for "single render endpoint behind a preview UI", and the queue / multi-tenant / self-hosted escape hatches are explicit.
Nits
nitdocs/guides/deploy.mdx:139—## Next Stepsis title-case, every other H2 in this file is sentence-case ("Choosing a template", "Architecture", "Swapping the composition", "When to use a template..."). Trivial; just sentence-case it for consistency.nitdocs/guides/deploy.mdx:5— "deploy from a single button" in the lede is slightly at odds with the Cloudflare<Note>requiring a Workers Paid plan. You already softened the Cloudflare tab; the lede could match (e.g. "deploy from a one-click template" — which is what the title says anyway).nitdocs/guides/deploy.mdx:71— The pre-bake explanation says installing Chromium + chrome-headless-shell takes "30–60s". The Vercel template README's create-snapshot script does the same six steps (dnf installlibs →npm install hyperframes ffmpeg-static→hyperframes browser ensure) and the Cloudflare Dockerfile does the equivalent at image build time. Number is plausible and sourced from the templates, but it's the kind of figure that drifts (Chromium versions, mirror speed). Optional to caveat as "tens of seconds" or drop the number — same shape as the perf/pricing trim you already did.nitdocs/guides/deploy.mdx:92— In the ASCII diagram, "Vercel Blob / Cloudflare R2" branches off the middle box, which is fine, but the Cloudflare reality is "Worker streams response body straight to R2 PutObject" while Vercel is "function buffers MP4 thenput()to Blob". The simplification is acceptable for a one-pager — flagging only because if a reader copies this mental model and tries to add a long render to Vercel, they'll wonder why the function memory is the bottleneck. Optional; can stay as-is.
Verified
- Both template repos exist (
heygen-com/hyperframes-vercel-template,heygen-com/hyperframes-cloudflare-template) and their descriptions match the doc. lib/preview.tsin the Vercel template exportsPREVIEW_COMPOSITION_DIRat the top —Step 3instruction is correct.app/page.tsxin the Vercel template hasCOMPOSITION_WIDTH = 1920; COMPOSITION_HEIGHT = 1080—Step 31920×1080 reference is correct.scripts/build.mjsin the Cloudflare template readsprocess.env.PREVIEW_COMPOSITION_DIR ?? "compositions/ui-3d-reveal"—Step 3env-var override instruction is correct.public/index.htmlin the Cloudflare template hardcodeswidth="1920" height="1080"—Step 3"update player dimensions" is correct.docs.jsonnav slot is right afterguides/rendering, exactly as the PR body claims./packages/playerand/packages/clicross-links resolve (both pages exist indocs/packages/).- Tooling style (
npx hyperframes init,npm run deploy,vercel deploy) matches existingquickstart.mdxandrendering.mdx, which usenpxnotbunx. No inconsistency. - Mintlify components (
<Tabs>,<Tab>,<Steps>,<Step>,<Note>,<CardGroup>,<Card>) are all used elsewhere in this docs site (e.g.quickstart.mdx,rendering.mdx). - Pure docs PR — no template code changes sneaking in.
— Vai
Merge activity
|
What
Adds a new guide at
docs/guides/deploy.mdxcovering the two official one-click deployment templates:Wires the new page into
docs.jsonunder Guides, slotted right afterguides/rendering(logical follow-on: render locally → deploy to the cloud).Why
The two templates currently only exist as GitHub READMEs, so they're invisible to anyone reading the docs site. New users who want a hosted preview + render endpoint have no entry point in the docs to discover them.
How
Single guide with:
<Tabs>for per-platform details (deploy button, what you get, performance, pricing, "why this primitive").Single-page approach (vs. one page per template) chosen because content overlaps heavily — easier to discover and lower maintenance until more templates land.
Test plan
bunx oxfmt --checkandbunx oxlintpass on changed files (no rules apply to.mdx/.jsonhere)<Tabs>,<Steps>,<CardGroup>,<Note>) render correctly