web: configure vercelPreset() for Vercel deployments#1815
Conversation
Enables per-route bundle splitting, function-level configuration, and an accurate Deployment Summary for the packages/web Vercel deployment. Gated on WORKFLOW_WEB_VERCEL_BUILD (rather than the ambient VERCEL var) so that the standard build layout consumed by server.js (self-hosted deployments and the CLI's in-process server via @workflow/web/server) is still produced when the package is packed as a tarball by the docs Vercel deployment. Existing VERCEL-based checks in vite.config.ts have been migrated to this same variable for consistency.
🦋 Changeset detectedLatest commit: 211e16a The changes in this PR will be included in the next version bump. This PR includes changesets to release 18 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
📊 Benchmark Results
workflow with no steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro workflow with 1 step💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro workflow with 10 sequential steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro workflow with 25 sequential steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro workflow with 50 sequential steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro Promise.all with 10 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro Promise.all with 25 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro Promise.all with 50 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro Promise.race with 10 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro Promise.race with 25 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro Promise.race with 50 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro workflow with 10 sequential data payload steps (10KB)💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro workflow with 25 sequential data payload steps (10KB)💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro workflow with 50 sequential data payload steps (10KB)💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro workflow with 10 concurrent data payload steps (10KB)💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro workflow with 25 concurrent data payload steps (10KB)💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro workflow with 50 concurrent data payload steps (10KB)💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro Stream Benchmarks (includes TTFB metrics)workflow with stream💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro stream pipeline with 5 transform steps (1MB)💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro 10 parallel streams (1MB each)💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro fan-out fan-in 10 streams (1MB each)💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro SummaryFastest Framework by WorldWinner determined by most benchmark wins
Fastest World by FrameworkWinner determined by most benchmark wins
Column Definitions
Worlds:
❌ Some benchmark jobs failed:
Check the workflow run for details. |
🧪 E2E Test Results✅ All tests passed Summary
Details by Category✅ ▲ Vercel Production
✅ 💻 Local Development
✅ 📦 Local Production
✅ 🐘 Local Postgres
✅ 🪟 Windows
✅ 📋 Other
|
There was a problem hiding this comment.
Pull request overview
This PR updates @workflow/web’s build configuration to support Vercel deployments via React Router’s Vercel preset, while preserving the existing self-hosted/npm package build layout by gating the preset (and related Vite behavior) behind a new WORKFLOW_WEB_VERCEL_BUILD environment variable.
Changes:
- Add
@vercel/react-routerand configurevercelPreset()inpackages/web/react-router.config.ts, gated byWORKFLOW_WEB_VERCEL_BUILD. - Migrate
packages/web/vite.config.tsVercel checks to useWORKFLOW_WEB_VERCEL_BUILDinstead ofVERCEL. - Add a changeset and update the lockfile for the new dependency graph.
Reviewed changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Locks new @vercel/react-router (and transitive deps) and updates some resolved versions. |
| packages/web/vite.config.ts | Switches Vercel-specific build/external behavior to a dedicated env-gated flag. |
| packages/web/react-router.config.ts | Adds Vercel preset configuration, gated to avoid breaking server.js self-hosted layout. |
| packages/web/package.json | Adds @vercel/react-router to devDependencies. |
| .changeset/web-vercel-preset.md | Documents the change and the new env flag for release notes. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Turborepo strips environment variables not declared in turbo.json, which prevented WORKFLOW_WEB_VERCEL_BUILD (set on the Vercel project) from reaching the build. Declare it in the env list and also include the .vercel/ directory (where the preset writes react-router-build-result.json) in the build outputs.
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
…ovements * origin/main: web: configure vercelPreset() for Vercel deployments (#1815) [core] Combine flow+step bundle and process steps eagerly (#1338) [world-vercel] Revert stream close control framing (#1891) [tarballs] Use turbo to build workspace deps before packing (#1908) # Conflicts: # tarballs/vercel.json
…ignal * origin/main: [core] Skip inline step execution when suspension also has a wait (#1924) [errors] Replace chalk import in @workfow/errors with inline ANSI shim (#1915) Fix compatibility with Zod 4.4.x (#1902) Serialize `run_failed`/`step_failed` errors through serialization pipeline (#1851) tarballs: redesign preview tarballs index page (#1911) Remove extra changeset (#1922) Add stable Next.js eager and lazy test coverage (#1747) Enforce per-(run, correlation) uniqueness for entity-creating events in world-postgres (#1878) fix(world-vercel): add default request timeout to workflow-server HTTP calls (#1807) Allow disabling step sourcemap with new `sourcemap` option in builders (#1842) [ci] Enable Vercel-prod e2e for tanstack-start (#1904) web: configure vercelPreset() for Vercel deployments (#1815) [core] Combine flow+step bundle and process steps eagerly (#1338) [world-vercel] Revert stream close control framing (#1891) [tarballs] Use turbo to build workspace deps before packing (#1908) # Conflicts: # packages/core/src/runtime/step-handler.test.ts # packages/core/src/runtime/step-handler.ts # packages/core/src/runtime/suspension-handler.ts # packages/core/src/step.test.ts # packages/world-local/src/storage/events-storage.ts # packages/world-postgres/src/drizzle/migrations/meta/_journal.json
Summary
@vercel/react-routerand configuresvercelPreset()inpackages/web/react-router.config.tsto enhance thepackages/webVercel deployment with per-route bundle splitting, function-level configuration (memory,maxDuration, etc.), and an accurate "Deployment Summary".WORKFLOW_WEB_VERCEL_BUILDenv var (set on the web Vercel project) so the standard build layout is still produced whenpackages/webis packed as a tarball by thedocsdeployment (which also setsVERCEL=1viadocs/scripts/pack.ts).process.env.VERCELchecks inpackages/web/vite.config.tsto the sameWORKFLOW_WEB_VERCEL_BUILDvar, fixing a latent bug where packed tarballs from the docs deployment would have been missingbuild/server/index.js(breakingserver.js/@workflow/web/server).Why not just
process.env.VERCEL?The preset always enables React Router's
serverBundles, which changes the server output frombuild/server/index.js→build/server/<runtime>_<hash>/index.js. That path is imported bypackages/web/server.js, which is in turn consumed bypackages/cli/src/lib/inspect/web.ts(await import('@workflow/web/server')) for the CLI's in-process UI server. UsingVERCELalone would break the npm tarball produced for every docs preview deployment.Action taken
WORKFLOW_WEB_VERCEL_BUILD=1has been set in thepackages/webVercel project's environment variables.Verification
build/server/server.jsnpm publishindex.jsVERCEL=1index.jsVERCEL=1+WORKFLOW_WEB_VERCEL_BUILD=1nodejs_<hash>/index.js+.vercel/react-router-build-result.json