Universal Server powered by srvx, running with Vite dev server
+ +This is an example app demonstrating the integration of srvx with Vite.
+srvx is a universal server framework based on web standards, and Vite provides lightning-fast development experience.
+ + +`, + { + headers: { + "Content-Type": "text/html", + }, + }, + ); + } + + return new Response("Not Found", { status: 404 }); + }, +}; diff --git a/examples/basic/tsconfig.json b/examples/basic/tsconfig.json new file mode 100644 index 0000000..7e31a45 --- /dev/null +++ b/examples/basic/tsconfig.json @@ -0,0 +1,15 @@ +{ + "compilerOptions": { + "target": "ES2022", + "module": "ESNext", + "lib": ["ES2022", "DOM"], + "moduleResolution": "bundler", + "esModuleInterop": true, + "skipLibCheck": true, + "strict": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true + }, + "include": ["src", "frontend"] +} diff --git a/examples/basic/vite.config.ts b/examples/basic/vite.config.ts new file mode 100644 index 0000000..e8e825e --- /dev/null +++ b/examples/basic/vite.config.ts @@ -0,0 +1,10 @@ +import { defineConfig } from "vite"; +import srvx from "vite-plugin-srvx"; + +export default defineConfig({ + plugins: [ + ...srvx({ + entry: "./src/server.ts", + }), + ], +}); diff --git a/examples/vercel/.gitignore b/examples/vercel/.gitignore new file mode 100644 index 0000000..8cf80cd --- /dev/null +++ b/examples/vercel/.gitignore @@ -0,0 +1,20 @@ +# Dependencies +node_modules/ + +# Build output +dist/ + +# Vercel +.vercel/ + +# Environment +.env +.env.local +.env*.local + +# Logs +*.log + +# OS +.DS_Store +.vercel diff --git a/examples/vercel/README.md b/examples/vercel/README.md new file mode 100644 index 0000000..f37b302 --- /dev/null +++ b/examples/vercel/README.md @@ -0,0 +1,223 @@ +# Vercel Edge Functions Example + +This example demonstrates how to deploy a **srvx** server as a **Vercel Edge Function** using **vite-plugin-srvx**. + +## Features + +- ⚡ **Vite** for lightning-fast development +- 🌐 **srvx** Universal Server with Web Standard APIs +- ▲ **Vercel Edge Functions** for global edge deployment +- 🎨 Interactive frontend with API testing +- 🔧 Zero-config deployment setup + +## Quick Start + +### 1. Install Dependencies + +```bash +pnpm install +``` + +### 2. Development + +```bash +pnpm dev +``` + +Visit http://localhost:5173 to see the app in development mode. + +### 3. Build + +```bash +pnpm build +``` + +This creates: +``` +dist/ +├── api/ +│ └── index.js # Vercel Edge Function +└── public/ # Static assets + ├── index.html + └── assets/ +``` + +### 4. Preview with Vercel CLI + +```bash +pnpm preview +``` + +Or manually: + +```bash +vercel dev +``` + +## Deploy to Vercel + +### Option 1: Deploy via CLI + +```bash +# Install Vercel CLI if you haven't +npm i -g vercel + +# Deploy +vercel +``` + +### Option 2: Deploy via GitHub + +1. Push this example to a GitHub repository +2. Import the repository in [Vercel Dashboard](https://vercel.com/new) +3. Vercel will automatically detect the configuration and deploy! + +## How It Works + +### 1. Vite Configuration + +The `vite.config.ts` enables Vercel mode: + +```typescript +import { defineConfig } from "vite"; +import srvx from "vite-plugin-srvx"; + +export default defineConfig({ + plugins: [ + ...srvx({ + entry: "./src/server.ts", + framework: "vercel", // Enable Vercel Edge Functions + }), + ], +}); +``` + +### 2. Vercel Configuration + +The `vercel.json` tells Vercel where to find the Edge Function: + +```json +{ + "buildCommand": "pnpm build", + "outputDirectory": "dist/public", + "functions": { + "dist/api/**": { + "runtime": "edge" + } + } +} +``` + +### 3. Server Code + +Your srvx server (`src/server.ts`) uses Web Standard APIs: + +```typescript +export default { + async fetch(request: Request): PromisePowered by srvx + Vite
+Click a button above to test an API endpoint+
+ This is a demonstration of srvx (Universal Server) + deployed as a Vercel Edge Function, with + Vite powering the development and build process. +
+