skills.rest
rangojs
rangojsOFFICIAL
Explore all skills by this author →
GitHub

vercel

Deploy Rango React Server Components apps to Vercel Functions via Build Output API v3.

Updated Nov 7, 2025
Search Tags:#deployment#vercel#vite#opentelemetry#edge caching#react server components#build output api
One-click install
npx skills add https://github.com/rangojs/rango --skill vercel-rangojs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel
Source: https://github.com/rangojs/rango/tree/main/packages/rangojs-router/skills/vercel
Command: npx skills add https://github.com/rangojs/rango --skill vercel-rangojs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @vercel/functions, @vercel/otel.

What problem does it solve? Deploying a Rango RSC application to Vercel requires correctly assembling the Build Output API v3 directory, configuring a streaming Node Function, wiring the Runtime Cache, and handling tracing — all of which involve platform-specific details that are easy to get wrong manually. ## Core Features & Use Cases - Build Output API v3 assembly: The vercel preset builds like the node preset and emits a .vercel/output directory containing a single streaming Node Function plus static client assets, deployable with vercel deploy --prebuilt or Git integration. - Function configuration: Set runtime, maxDuration, memory, regions, and functionName under the vercel option, written into .vc-config.json. - Runtime Cache integration: VercelCacheStore wraps the Vercel Runtime Cache for segment, item, response, and PPR shell families, with an in-memory fallback for local development. - Host routers and tracing: Deploy multi-app host routers as a single function, and emit rango.* phase spans through OpenTelemetry via createVercelTracing() and @vercel/otel. - Use Case: You have a Rango app with loaders, Server Actions, and PPR shells and want to ship it on Vercel — this Skill walks through the preset config, cache setup, and local validation scripts. ## Quick Start Ask the assistant to configure your Rango app with the vercel preset in vite.config.ts and explain how to deploy the generated .vercel/output directory.

Frequently Asked Questions about vercel

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I deploy a Rango app to Vercel?▼

Set the rango Vite plugin to the vercel preset, install @vercel/functions, and run vite build to produce a .vercel/output directory. Deploy it with vercel deploy --prebuilt or through Vercel's Git integration.

How do I configure Vercel Function settings like memory and regions in Rango?▼

Pass a vercel options object to the rango plugin with runtime, maxDuration, memory, regions, and functionName. These values are written into .vc-config.json during the build.

Does the Rango vercel preset support the Vercel Runtime Cache?▼

Yes, VercelCacheStore wraps the Vercel Runtime Cache for segment, item, response, and PPR shell cache families. Locally, when process.env.VERCEL is absent, fall back to MemorySegmentCacheStore so dev and preview work without the platform.

Can I use OpenTelemetry tracing with Rango on Vercel?▼

Yes, createVercelTracing from @rangojs/router/vercel emits rango.* phase spans onto the global OTel tracer installed by @vercel/otel's registerOTel. It is Node-runtime only, and registerOTel must run before the first request.

Why doesn't the Rango vercel preset emit a prerender config or CDN-stitched PPR resume?▼

Rango PPR runs the full global and route middleware chain before committing shell bytes, which a CDN-first shell cannot preserve because the resume function is invoked after streaming starts. For public responses, use HTTP s-maxage and stale-while-revalidate for whole-response CDN caching instead.

How do I test a Vercel deployment of a Rango app locally?▼

vite preview only serves static client assets, so use the preview.mjs script in examples/vercel-basic to serve .vercel/output with filesystem-then-function routing. The smoke.mjs script runs a more faithful test from an isolated temp directory.

Related Skills

Explore More Software Engineering Skills→
tanstack-skillstanstack-skills
29

tanstack-start

Build server-rendered React apps with typed server functions and TanStack Router.

Official
Advanced
dongzhuoyaodongzhuoyao
10

vercel-cost-optimization

Guide efficient ISR patterns, caching strategies, and function constraints for Next.js projects on Vercel.

Community
Advanced
hoangnh2412hoangnh2412
12

telemetry-dotnet-redis

Instrument Redis command traces for .NET applications using OpenTelemetry.

Community
Intermediate
AradotsoAradotso
2

cloudflare-agentic-inbox

Automate private email management on Cloudflare Workers with Durable Objects and R2.

Official
Advanced