Frontend Deployment (Vercel)

Relevant source files

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

• testgen/package.json
• testgen/vite.config.ts
• README.md
• testgen/CLIENT_BACKEND.md
• testgen/src/lib/backend.ts
• testgen/test-repo.html

The testgen frontend is a modern React application built with Vite and TypeScript. It is designed for static deployment on platforms like Vercel. The live application is hosted on Vercel, as indicated in the project's main README.md.

The project has evolved to use a client-side backend implementation, which eliminates the need for a separate Go server for deployment. This simplifies the deployment process to hosting a static frontend, making Vercel an ideal choice. This client-side approach allows the browser to directly communicate with the GitHub and Google Gemini APIs.

Sources: README.md, testgen/CLIENT_BACKEND.md

Build Process

The frontend application is built using Vite. The build process is defined by scripts in package.json and configured in vite.config.ts. Vercel's deployment pipeline will typically execute the npm run build command to generate the static assets.

Sources: testgen/package.json, testgen/vite.config.ts

Build Scripts

The following scripts from package.json are relevant to the build and deployment lifecycle:

Script	Command	Description
dev	vite	Starts the development server on port 8080.
build	vite build	Creates a production build of the application in the dist directory. This is the command Vercel uses.
preview	vite preview	Serves the production build locally to preview it before deployment.

Sources: testgen/package.json:5-9, testgen/vite.config.ts:8-11

Build Configuration

The Vite configuration file, vite.config.ts, specifies the build tool, plugins, and server settings. The key elements are the React plugin and the path alias for @.

// testgen/vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";
import { componentTagger } from "lovable-tagger";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  server: {
    host: "::",
    port: 8080,
  },
  plugins: [react(), mode === "development" && componentTagger()].filter(Boolean),
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
}));

Sources: testgen/vite.config.ts

Build and Deployment Flow

The diagram below illustrates the process from code push to live deployment on Vercel.

This diagram shows the automated build and deployment pipeline triggered by a push to the GitHub repository.
Sources: testgen/package.json:6, README.md

Deployment Architecture

The application's architecture is serverless from a self-hosting perspective. The Vercel-deployed frontend contains all the logic required to interact with external APIs directly from the user's browser. This is a significant shift from the previous architecture which required a Go backend.

Key aspects of the deployment architecture:

• Static Hosting: The frontend is deployed to a static hosting service like Vercel.
• Client-Side Backend: The logic for fetching repository data and generating tests is handled in the browser by src/lib/backend.ts.
• Direct API Calls: The browser makes direct calls to the GitHub API for code and the Google Gemini API for test generation.

Sources: testgen/CLIENT_BACKEND.md, testgen/src/lib/backend.ts

Architecture Diagram

The following diagram shows the interaction between the user, the Vercel-hosted frontend, and external services.

This flow demonstrates the serverless nature of the deployment, where Vercel's role is to serve the static application files.
Sources: testgen/CLIENT_BACKEND.md, testgen/src/lib/backend.ts:210-243, 513-530

Vercel Configuration

While a vercel.json file is not present in the repository, Vercel's platform can automatically detect that this is a Vite project and apply the correct settings. The likely configuration used by Vercel is:

• Build Command: npm run build
• Output Directory: dist
• Install Command: npm install

This default configuration is sufficient for deploying the testgen frontend.

Sources: testgen/package.json:6

CORS and API Interactions

A critical reason for deploying to Vercel is to handle Cross-Origin Resource Sharing (CORS) limitations. When running the application locally, direct browser calls to the GitHub API can be blocked by the browser's security policies. Deploying the application to Vercel mitigates these issues.

The client-side backend in src/lib/backend.ts makes fetch requests directly to https://api.github.com and https://generativelanguage.googleapis.com.

Sources: testgen/CLIENT_BACKEND.md, testgen/test-repo.html:12-13, testgen/src/lib/backend.ts:340-343

API Call Sequence

This sequence diagram illustrates how the frontend fetches repository files.

This diagram shows the direct communication from the React application to the GitHub API.
Sources: testgen/src/lib/backend.ts:210-243

Summary

The testgen frontend is architected for simple, robust deployment on static hosting platforms like Vercel. By moving the backend logic to the client-side, the project eliminates the need to manage a separate server, reducing cost and maintenance overhead. The build process is standardized using Vite and npm scripts, which integrates seamlessly with Vercel's automated CI/CD pipeline. The live Vercel deployment is essential for the application to function correctly due to browser CORS policies affecting direct API calls.

Sources: README.md, testgen/CLIENT_BACKEND.md