# Jeremylongshore Claude Code Plugins Plus Skills Vercel Hello World > Vercel Hello World - Skill: `tomevault-io/jeremylongshore-claude-code-plugins-plus-skills-vercel-hello` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/jeremylongshore-claude-code-plugins-plus-skills-vercel-hello` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/jeremylongshore-claude-code-plugins-plus-skills-vercel-hello/raw - Safety review: pending (external: skill-scanner PASS, skillspector CAUTION) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/jeremylongshore-claude-code-plugins-plus-skills-vercel-hello --- # Vercel Hello World ## Overview Deploy a minimal project to Vercel with a static page and a serverless API route. Confirms your CLI auth, project structure, and deployment pipeline work end to end. ## Prerequisites - Completed `vercel-install-auth` setup - Vercel CLI installed and authenticated - Node.js 18+ ## Instructions ### Step 1: Create Project Structure ```bash mkdir my-vercel-app && cd my-vercel-app npm init -y ``` Create the static landing page: ```html Hello Vercel

Hello from Vercel

``` ### Step 2: Create Serverless API Route ```typescript // api/hello.ts import type { VercelRequest, VercelResponse } from '@vercel/node'; export default function handler(req: VercelRequest, res: VercelResponse) { res.status(200).json({ message: 'Hello from Vercel Serverless Function!', timestamp: new Date().toISOString(), region: process.env.VERCEL_REGION || 'local', }); } ``` Install the types: ```bash npm install --save-dev @vercel/node typescript ``` ### Step 3: Add vercel.json Configuration ```json { "rewrites": [ { "source": "/api/(.*)", "destination": "/api/$1" } ], "headers": [ { "source": "/api/(.*)", "headers": [ { "key": "Cache-Control", "value": "s-maxage=0, stale-while-revalidate" } ] } ] } ``` ### Step 4: Deploy Preview ```bash # Deploy to a preview URL (not production) vercel # Output: # Vercel CLI 39.x.x # 🔗 Linked to your-team/my-vercel-app # 🔍 Inspect: https://vercel.com/your-team/my-vercel-app/xxx # ✅ Preview: https://my-vercel-app-xxx.vercel.app ``` ### Step 5: Test the Deployment ```bash # Test static page curl -s https://my-vercel-app-xxx.vercel.app/ | head -5 # Test API route curl -s https://my-vercel-app-xxx.vercel.app/api/hello | jq . # { # "message": "Hello from Vercel Serverless Function!", # "timestamp": "2026-03-22T12:00:00.000Z", # "region": "iad1" # } ``` ### Step 6: Promote to Production ```bash # Deploy directly to production vercel --prod # Or promote the preview deployment vercel promote https://my-vercel-app-xxx.vercel.app ``` ## Vercel System Environment Variables These are available in every function at runtime: | Variable | Value | |----------|-------| | `VERCEL` | `"1"` — always set on Vercel | | `VERCEL_ENV` | `"production"`, `"preview"`, or `"development"` | | `VERCEL_URL` | Deployment URL (no protocol) | | `VERCEL_REGION` | Function region (e.g., `iad1`) | | `VERCEL_GIT_COMMIT_SHA` | Git commit hash | | `VERCEL_GIT_COMMIT_MESSAGE` | Git commit message | ## Output - Static page served from Vercel CDN - Serverless API route returning JSON at `/api/hello` - Preview URL for testing before production - Production deployment live on your domain ## Error Handling | Error | Cause | Solution | |-------|-------|----------| | `404 NOT_FOUND` on `/api/hello` | File not in `api/` directory | Move file to project root `api/` folder | | `FUNCTION_INVOCATION_FAILED` | Runtime error in handler | Check function logs: `vercel logs ` | | `BUILD_FAILED` | TypeScript compilation error | Run `npx tsc --noEmit` locally first | | `NO_RESPONSE_FROM_FUNCTION` | Handler didn't call `res.send/json` | Ensure all code paths return a response | | `FUNCTION_PAYLOAD_TOO_LARGE` | Response body > 4.5 MB | Paginate or stream the response | ## Resources - [Vercel Serverless Functions](https://vercel.com/docs/functions) - [Vercel Project Configuration](https://vercel.com/docs/project-configuration) - [Vercel CLI Deploy](https://vercel.com/docs/cli/deploy) - [@vercel/node Runtime](https://vercel.com/docs/functions/runtimes/node-js) ## Next Steps Proceed to `vercel-local-dev-loop` for development workflow setup. --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/jeremylongshore) — claim your Tome and manage your conversions.