Skip to main content
Deploy your Resolid application to Vercel’s serverless infrastructure with automatic builds and edge network distribution.

​
Configuration

Configure your application for Vercel deployment in resolid.config.ts:
resolid.config.ts
import { defineDevConfig } from "@resolid/dev";

export const { vitePluginOptions, reactRouterConfig } = defineDevConfig({
  appDirectory: "src",
  platform: "vercel",
  nodeVersion: 22,
});

​
Configuration Options

​
platform
string
required
Set to "vercel" for Vercel deployment
​
nodeVersion
number
default:"22"
Node.js runtime version (18, 20, 22, or 24)
​
includeFiles
string[]
Additional files to include in serverless functions

​
Server Setup

Create your server entry file using createHonoVercelServer:
src/server.ts
import { createHonoVercelServer } from "@resolid/dev/http.server";

export default await createHonoVercelServer({
  configure: async (hono) => {
    // Add custom middleware or routes
  },
  getLoadContext: () => {
    // Return context available in route loaders/actions
    return {};
  },
});

​
Server Options

​
configure
function
Function to configure the Hono server instance with custom middleware
​
getLoadContext
function
Function returning context object available in React Router loaders and actions

​
Build Output Structure

The build process generates a .vercel/output directory with: 
.vercel/output/
├── config.json          # Vercel routing configuration
├── static/              # Static assets from build/client
│   ├── assets/         # Immutable assets (cached 1 year)
│   └── ...             # Other static files
└── functions/           # Serverless function bundles
    ├── _site.func/     # Main application function
    │   ├── server.mjs  # Bundled server code
    │   └── .vc-config.json
    └── ...             # Additional route-specific functions

​
Vercel Configuration

The build automatically generates config.json with:
  • Asset caching rules (1 year for immutable assets)
  • Filesystem routing
  • Function routing for server-rendered pages
  • Response streaming support

​
Deployment Steps

1

Connect repository

Connect your Git repository to Vercel:
  1. Visit vercel.com/new
  2. Import your Git repository
  3. Vercel will auto-detect your framework settings
2

Configure build settings

Vercel should auto-detect the settings, but verify:
  • Build Command: npm run build
  • Output Directory: .vercel/output
  • Install Command: npm install
3

Deploy

Click Deploy and Vercel will:
  1. Install dependencies
  2. Run the build process
  3. Deploy serverless functions
  4. Distribute static assets to the edge network

​
Environment Variables

Set environment variables in the Vercel dashboard:
​
NODE_ENV
string
default:"production"
Automatically set by Vercel
​
VERCEL
string
Set to "1" by Vercel platform
​
VERCEL_PROJECT_PRODUCTION_URL
string
Production URL of your deployment

​
Vercel CLI Deployment

Deploy using the Vercel CLI: 
# Install Vercel CLI
npm i -g vercel

# Deploy to preview
vercel

# Deploy to production
vercel --prod

​
Serverless Functions

The Vercel preset automatically creates optimized serverless functions:
  • Functions are bundled with only necessary dependencies
  • Uses Node File Trace for minimal bundle size
  • Supports response streaming
  • Configured with appropriate Node.js runtime
Each function’s .vc-config.json specifies: 
{
  "handler": "server.mjs",
  "runtime": "nodejs22.x",
  "launcherType": "Nodejs",
  "supportsResponseStreaming": true
}

​
Request Utilities

Vercel provides built-in request utilities:

​
Client IP Detection

src/server.ts
import { createHonoVercelServer, vercelClientIpGetter } from "@resolid/dev/http.server";
import { clientIp } from "@resolid/dev/http.server";

export default await createHonoVercelServer({
  configure: async (hono) => {
    hono.use("*", clientIp(vercelClientIpGetter()));
  },
});
Uses the x-real-ip header provided by Vercel.

​
Request ID

src/server.ts
import { createHonoVercelServer, vercelRequestIdGenerator } from "@resolid/dev/http.server";
import { requestId } from "@resolid/dev/http.server";

export default await createHonoVercelServer({
  configure: async (hono) => {
    hono.use("*", requestId(vercelRequestIdGenerator()));
  },
});
Uses the x-vercel-id header for request tracing.

​
Request Origin

src/server.ts
import { createHonoVercelServer, vercelRequestOriginGetter } from "@resolid/dev/http.server";
import { requestOrigin } from "@resolid/dev/http.server";

export default await createHonoVercelServer({
  configure: async (hono) => {
    hono.use("*", requestOrigin(vercelRequestOriginGetter()));
  },
});
Returns the production URL from VERCEL_PROJECT_PRODUCTION_URL.

​
Server Bundles

For large applications, you can split server code into multiple bundles:
resolid.config.ts
import { defineDevConfig } from "@resolid/dev";

export const { vitePluginOptions, reactRouterConfig } = defineDevConfig({
  platform: "vercel",
  reactRouterConfig: {
    serverBundles: ({ branch }) => {
      // Create separate bundles for different route sections
      if (branch.some((route) => route.id.startsWith("admin"))) {
        return "admin";
      }
      return "site";
    },
  },
});
This creates:
  • _site.func/ - Main application function
  • _admin.func/ - Admin section function
Each function is deployed independently with optimized dependencies.

​
Performance Optimization

​
Edge Network

Static assets are automatically distributed to Vercel’s edge network:
  • Assets cached at edge locations worldwide
  • Immutable assets cached for 1 year
  • Fast response times globally

​
Function Regions

Configure function regions in vercel.json:
vercel.json
{
  "functions": {
    "src/server.ts": {
      "memory": 1024,
      "maxDuration": 10
    }
  },
  "regions": ["iad1"]
}

​
Monitoring

Monitor your deployment in the Vercel dashboard:
  • Real-time function logs
  • Performance metrics
  • Error tracking
  • Analytics and insights

​
Troubleshooting

Ensure all dependencies are in package.json and ssr.external is configured correctly in your Vite config.
Increase function timeout in vercel.json or optimize your server-side code.
Use serverBundles to split your application into smaller, route-specific functions.

Build docs developers (and LLMs) love

Get started for freeTalk to us