Deployment: Frontend (Vercel)
Relevant source files
The following files were used as context for generating this wiki page:The LLaMa Leaks frontend is a modern Single Page Application (SPA) built with React and TypeScript, using Vite as the build tool. Its purpose is to provide a passive AI security dashboard that visualizes publicly exposed Ollama servers for educational and security awareness purposes.
Sources: README.md:3-12, frontend/package.json:2,12-58
The application is designed for static hosting and is deployed on the Vercel platform. The deployment process is defined by a combination of npm scripts and a Vercel-specific configuration file, vercel.json, which dictates the build command and routing behavior for the live application.
Sources: frontend/vercel.json, frontend/package.json:7
Build Process
The entire frontend application is bundled into static assets using Vite. The build process is initiated by the build script defined in package.json, which in turn executes vite build.
Sources: frontend/package.json:7
The core build configuration is managed in vite.config.ts. This file specifies the output directory, disables source maps for production, and sets up path aliases for cleaner imports within the codebase.
Sources: frontend/vite.config.ts
This diagram shows the sequence of events from a Vercel deployment trigger to the generation of static files.
Vite Build Configuration
The following table summarizes the key build settings found in the Vite configuration.
| Option | Value | Description | Source |
|---|---|---|---|
outDir | "dist" | The directory where the built static assets will be placed. | [frontend/vite.config.ts:18](https://github.com/nileshevrywhr/llama-leaks/blob/HEAD/frontend/vite.config.ts#L18) |
sourcemap | false | Disables the generation of source maps for the production build. | [frontend/vite.config.ts:19](https://github.com/nileshevrywhr/llama-leaks/blob/HEAD/frontend/vite.config.ts#L19) |
alias | { "@": "./src" } | Creates a path alias @ that points to the src directory. | [frontend/vite.config.ts:13-15](https://github.com/nileshevrywhr/llama-leaks/blob/HEAD/frontend/vite.config.ts#L13-L15) |
Vercel Deployment Configuration
The deployment on Vercel is controlled by the frontend/vercel.json file. This configuration instructs Vercel on how to build and serve the application.
Sources: frontend/vercel.json
Configuration Details
| Key | Value | Description |
|---|---|---|
buildCommand | "npm run build" | The command Vercel executes to build the project. This corresponds to the build script in package.json. |
outputDirectory | "dist" | The directory containing the build output that Vercel should deploy. This matches the outDir in vite.config.ts. |
rewrites | [{ "source": "/(.*)", "destination": "/index.html" }] | A rule that redirects all incoming requests to index.html. This is essential for client-side routing in an SPA. |
| Sources: frontend/vercel.json:2-8 |
SPA Rewrite Logic
The rewrites configuration is critical for the correct functioning of the React Router-based SPA. It ensures that any deep link or direct navigation to a specific route (e.g., /about) is handled by the main index.html file, which then loads the React application to manage the routing on the client side.
Sources: frontend/vercel.json:4-7
This diagram illustrates how Vercel's rewrite rule processes a request for a non-root path, serving the main index.html to let the client-side router take over.
Sources: frontend/vercel.json:4-7, frontend/index.html
Application Entry Point and Data Fetching
The frontend/index.html file serves as the main entry point for the web application. It sets up the basic HTML structure, includes metadata for SEO and social sharing, and contains the root DOM element (<div id="root"></div>) where the React application is mounted. Crucially, it loads the bundled JavaScript via <script type="module" src="/src/main.tsx"></script>.
Sources: frontend/index.html:5-23
Once the application loads, components like Hero.tsx and LocationInfo.tsx are responsible for fetching and displaying the data about exposed servers. This data is not fetched from a dynamic API but from a static JSON file bundled with the deployment.
Sources: frontend/src/components/Hero.tsx:37-46, frontend/src/components/LocationInfo.tsx:35-50
The fetchRandomServer function in these components makes a request to /data/live_servers.json. Because this is a relative path, the browser requests this file from the same Vercel deployment, which serves it as a static asset.
// frontend/src/components/Hero.tsx:40-42
const response = await fetch('/data/live_servers.json');
if (!response.ok) {
throw new Error(`Failed to fetch server data: ${response.status}`);
}
Sources: frontend/src/components/Hero.tsx:40-42
Conclusion
The frontend deployment for LLaMa Leaks on Vercel is a streamlined process optimized for a static Single Page Application. The build is handled by Vite, producing a self-contained set of assets in the dist directory. The vercel.json configuration correctly points to this output and implements a crucial rewrite rule, enabling seamless client-side routing with React Router. The application's data is also served statically from a JSON file, ensuring high performance and simple infrastructure management.
Sources: frontend/vercel.json, frontend/package.json, frontend/vite.config.ts, frontend/src/components/Hero.tsx