Vercel Serverless Deployment

Relevant source files

The following files were used as context for generating this wiki page:

• vercel.json
• api/index.ts
• src/api/server.ts
• package.json
• README.md
• src/utils/logger.ts

Vercel Serverless Deployment serves as the primary hosting strategy for the WhereIsLifeCheaper web application and its REST API. This system leverages Vercel's infrastructure to provide a scalable, serverless environment that integrates a React-based frontend with a Node.js/Express backend.

The deployment architecture is designed to handle API requests through serverless functions while serving static assets for the frontend SPA (Single Page Application). This setup ensures high availability and efficient resource utilization by only executing backend logic in response to specific triggers.

Sources: README.md:16, README.md:118-122, vercel.json:1-14

Deployment Architecture

The project utilizes a monorepo-style structure where both the frontend and backend are deployed as a single unit on Vercel. The backend logic is encapsulated within a serverless function entry point, while the frontend is built and served as static content.

Request Flow and Routing

Vercel manages routing through the vercel.json configuration file. Requests starting with /api/ are routed to the serverless function, while all other requests are redirected to the frontend's index.html to support client-side routing.

The diagram shows how Vercel acts as a reverse proxy, routing traffic between the serverless API functions and the static frontend assets.
Sources: vercel.json:6-10, api/index.ts:1-93

Serverless Function Configuration

The primary API entry point for Vercel is located at api/index.ts. This file initializes an Express application specifically tuned for the serverless environment, including proxy trust and session management.

Configuration Key	Value	Description
memory	1024 MB	Allocated memory for the serverless function.
maxDuration	30 seconds	Maximum execution time before timeout.
outputDirectory	dist/frontend	Directory containing built frontend assets.
buildCommand	npm run build && npm run migrate	Combined command to build and sync DB schema.

Sources: vercel.json:3-5, vercel.json:11-14, api/index.ts:24-25

Backend Implementation for Serverless

The serverless backend differs from the standard standalone server in how it handles middleware and persistent connections.

API Entry Point

The api/index.ts file serves as the Vercel-specific bridge to the application's Express routes. It imports existing route handlers from the src/api/routes directory and applies serverless-compatible middleware.

This sequence illustrates the lifecycle of a single request within the Vercel serverless execution context.
Sources: api/index.ts:11-21, api/index.ts:80-92

Session and Database Persistence

To maintain state across serverless executions, the application uses connect-pg-simple to store sessions in the PostgreSQL database. This avoids the loss of session data when the serverless function instance is recycled.

// api/index.ts:39-55
const PgSession = connectPgSimple(session);
app.use(session({
  store: new PgSession({
    pool: pool,
    tableName: 'sessions',
    createTableIfMissing: false,
  }),
  secret: config.session.secret,
  resave: false,
  saveUninitialized: false,
  cookie: {
    secure: config.api.env === 'production',
    httpOnly: true,
    maxAge: 7 * 24 * 60 * 60 * 1000, // 7 days
    sameSite: 'lax',
  },
}));

Sources: api/index.ts:39-55, src/api/server.ts:48-65

Serverless-Specific Logging

Logging within the Vercel environment is handled by src/utils/logger.ts. It detects the serverless environment by checking for the VERCEL environment variable and adjusts its behavior accordingly.

Logging Constraints and Adaptations

1. Read-Only Filesystem: Serverless environments typically have read-only filesystems. The logger skips creating local log directories if isServerless is true.
2. Structured Output: Logs are redirected to stdout in JSON format. This allows Vercel's log drain or Google Cloud Logging to capture and index them without requiring persistent local storage.
3. GCP Integration: When deployed, the logger uses @google-cloud/logging-winston with redirectToStdout: true to avoid blocking gRPC connections during short-lived function executions.

Sources: src/utils/logger.ts:7-25, src/utils/logger.ts:60-75

Build and Deployment Lifecycle

The deployment process involves a series of steps executed by Vercel's build pipeline, as defined in the project configuration and package scripts.

Step	Command	Source
Install	npm install && cd frontend && npm install	vercel.json
Build Backend	tsc	package.json
Build Frontend	vite build	frontend/package.json
Migrate DB	ts-node scripts/migrate.ts	package.json

The build command npm run build && npm run migrate ensures that the database schema is synchronized with the code immediately before the new version of the application goes live.
Sources: vercel.json:2, package.json:7-9, frontend/package.json:7

Conclusion

Vercel Serverless Deployment provides a robust hosting environment for the project by separating static frontend delivery from dynamic API execution. By utilizing serverless functions with optimized memory and timeout settings, the system achieves a balance between performance and cost-effectiveness. The integration of database-backed sessions and structured logging ensures that the application remains reliable and observable within a distributed, ephemeral execution environment.