Skip to content

Add Vercel deployment support#580

Open
thomasKn wants to merge 2 commits intomainfrom
vercel-deployment
Open

Add Vercel deployment support#580
thomasKn wants to merge 2 commits intomainfrom
vercel-deployment

Conversation

@thomasKn
Copy link
Collaborator

Summary

  • Add hydrogen-vercel plugin for deploying Hydrogen storefronts to Vercel's serverless platform
  • Implement Upstash Redis cache to replace Oxygen's built-in caches API
  • Support Vercel Fluid Compute with response streaming

Files Changed

File Description
lib/hydrogen-vercel/ Custom Vite plugin + Node.js adapter for Vercel
app/lib/redis-cache.ts Upstash Redis cache implementing Web Cache API
app/lib/context.ts Fallback to Redis cache when caches API unavailable
server.ts Adapts env vars and execution context for Vercel
vite.config.ts Integrates vercel() plugin
vercel.json Build output configuration

Setup Steps

1. Add dependencies

Add the following dependencies to your project:

  • @mjackson/node-fetch-server - Node.js HTTP adapter
  • @upstash/redis - Redis client for caching
  • @vercel/functions - Vercel waitUntil API

2. Deploy

Vercel will automatically:

  • Run pnpm run build
  • Output to .vercel/output/ (Build Output API v3)
  • Deploy as a serverless function with streaming enabled

How It Works

Build Process

  1. Vite builds the client bundle normally
  2. For SSR, the hydrogen-vercel plugin:
    • Bundles server.ts with the Node.js adapter
    • Creates .vercel/output/functions/index.func/
    • Copies static assets to .vercel/output/static/
    • Generates route configuration in .vercel/output/config.json

Runtime

  1. Requests hit Vercel's edge network
  2. Static assets served directly with immutable cache headers
  3. Dynamic requests routed to the serverless function
  4. The Node.js adapter converts Node IncomingMessage → Web Request
  5. Your server.ts handles the request using Hydrogen
  6. Response streams back to the client (Fluid Compute)

Caching

  • Oxygen: Uses built-in caches API (Workers KV)
  • Vercel: Falls back to Upstash Redis with same interface
  • Both support stale-while-revalidate for background refresh

🤖 Generated with Claude Code

thomasKn and others added 2 commits January 25, 2026 17:05
- Add hydrogen-vercel Vite plugin that generates Vercel Build Output API v3
- Add Node.js adapter for converting between Node HTTP and Web Request/Response
- Add safe abort signal handling to prevent streaming SSR errors
- Add Upstash Redis cache adapter with NoOpCache fallback for Vercel
- Update server.ts with env/context fallbacks for Vercel serverless
- Update entry.server.tsx with safe abort wrapper for streaming
- Update vite.config.ts to use oxygen only in dev, vercel in build
- Add vercel.json build configuration

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Validation already happens in envVariables(), so getEnv() doesn't need
to manually map each environment variable. This removes duplication
and eliminates the need to update server.ts when adding new env vars.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@vercel
Copy link

vercel bot commented Jan 25, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
fluid Ready Ready Preview, Comment Jan 25, 2026 11:25pm

Request Review

@shopify
Copy link
Contributor

shopify bot commented Jan 25, 2026

Oxygen deployed a preview of your vercel-deployment branch. Details:

Storefront Status Preview link Deployment details Last update (UTC)
Fluid demo ❌ Error (Logs) - Inspect deployment January 25, 202611:25 PM

Learn more about Hydrogen's GitHub integration.

@claude
Copy link

claude bot commented Jan 25, 2026

Code review

No issues found. Checked for bugs and CLAUDE.md compliance.

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