CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vercel--static-build

A Vercel build runtime for static websites and single-page applications with zero configuration.

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

build-output.mddocs/

Build Output Processing

Support for different Build Output API versions (v1, v2, v3) with automatic detection and processing of static files, serverless functions, middleware, and deployment configuration.

Constants

Each Build Output API version uses specific directory names and configuration files:

// Build Output V1 Constants
const VERCEL_BUILD_OUTPUT = '.vercel_build_output';

// Build Output V2 Constants  
const BUILD_OUTPUT_DIR = '.output';
const CONFIG_FILES = [
  'build-manifest.json',
  'functions-manifest.json', 
  'images-manifest.json',
  'prerender-manifest.json',
  'routes-manifest.json'
];

// Build Output V3 Constants
const BUILD_OUTPUT_DIR = '.vercel/output';
const CONFIG_FILE = 'config.json';

Capabilities

Build Output API v3

The latest Build Output API that provides the most comprehensive deployment configuration through .vercel/output directory structure.

/**
 * Detects Build Output API v3 directory by config.json presence
 * @param path - Working directory path
 * @returns Path to build output directory or undefined
 */
function getBuildOutputDirectory(path: string): Promise<string | undefined>;

/**
 * Reads v3 configuration file
 * @param path - Working directory path  
 * @returns Configuration object with cache settings
 */
function readConfig(path: string): Promise<any | undefined>;

/**
 * Creates v3 build output result, throws error in dev mode
 * @param meta - Build metadata
 * @param buildCommand - Build command used
 * @param buildOutputPath - Path to build output directory
 * @param framework - Detected framework
 * @returns Build result with v3 format
 */
function createBuildOutput(
  meta: Meta,
  buildCommand: string | null,
  buildOutputPath: string,
  framework?: Framework
): Promise<{\n  buildOutputVersion: 3;\n  buildOutputPath: string;\n}>;

Usage Examples:

import * as BuildOutputV3 from "@vercel/static-build/utils/build-output-v3";
import { join } from 'path';
import { promises as fs } from 'fs';
import { BuildResultV2, Meta } from '@vercel/build-utils';
import { Framework } from '@vercel/frameworks';

// Detect v3 build output
const outputDir = await BuildOutputV3.getBuildOutputDirectory("/project");
if (outputDir) {
  console.log("Found Build Output v3 at:", outputDir);
  
  // Read configuration
  const config = await BuildOutputV3.readConfig("/project");
  console.log("Cache patterns:", config?.cache);
  
  // Create build result
  const result = BuildOutputV3.createBuildOutput(
    { isDev: false },
    "npm run build",
    outputDir
  );
}

V3 Directory Structure:

.vercel/output/
├── config.json          # Global configuration
├── static/              # Static files
├── functions/           # Serverless functions
└── ...

Build Output API v2

Intermediate Build Output API using .output directory with manifest-based configuration.

/**
 * Detects Build Output API v2 directory by manifest files
 * @param workingDir - Working directory path
 * @returns Path to build output directory or undefined
 */
function getBuildOutputDirectory(workPath: string): Promise<string | undefined>;

/**
 * Reads the BUILD_OUTPUT_DIR directory for middleware and static files
 * @param workPath - Working directory path
 * @returns Object with staticFiles, functions, and routes
 */
function readBuildOutputDirectory(options: { workPath: string }): Promise<{
  staticFiles: Files | null;
  functions: Record<string, EdgeFunction> | null;
  routes: Route[] | null;
}>;

/**
 * Creates v2 build output result from .output directory
 * @param workPath - Working directory path
 * @returns Build result with processed files and routes
 */
function createBuildOutput(workPath: string): Promise<BuildResultV2>;

Usage Examples:

import * as BuildOutputV2 from "@vercel/static-build/utils/build-output-v2";
import { pathExists, readJson, appendFile } from 'fs-extra';
import { Route } from '@vercel/routing-utils';
import { Files, FileFsRef, EdgeFunction, BuildResultV2 } from '@vercel/build-utils';

// Detect and process v2 build output
const outputDir = await BuildOutputV2.getBuildOutputDirectory("/project");
if (outputDir) {
  const result = await BuildOutputV2.createBuildOutput("/project");
  
  console.log("Static files:", Object.keys(result.output));
  console.log("Routes:", result.routes);
}

V2 Directory Structure:

.output/
├── build-manifest.json      # Build configuration
├── functions-manifest.json  # Function definitions
├── images-manifest.json     # Image optimization
├── prerender-manifest.json  # Pre-rendered routes
├── routes-manifest.json     # Route configuration
├── static/                  # Static assets
└── server/                  # Server functions

V2 Configuration Files:

  • build-manifest.json: Build metadata and settings
  • functions-manifest.json: Serverless function definitions
  • images-manifest.json: Image optimization configuration
  • prerender-manifest.json: Pre-rendered page definitions
  • routes-manifest.json: Dynamic route configuration

Build Output API v1

Legacy Build Output API using .vercel_build_output directory structure.

/**
 * Reads .vercel_build_output directory and returns processed outputs
 * @param options - Configuration with workPath and nodeVersion
 * @returns Build outputs with static files, functions, routes, images, and build config
 */
function readBuildOutputDirectory(options: {
  workPath: string;
  nodeVersion: NodeVersion;
}): Promise<BuildOutputV1Result>;

/**
 * Generic config file reader for build output
 * @param options - Configuration with workPath and config filename
 * @returns Parsed configuration object
 */
function readBuildOutputConfig<Config>(options: {
  workPath: string;
  configFileName: string;
}): Promise<Config | undefined>;

interface BuildOutputV1Result {
  staticFiles: Files | null;
  functions: Record<string, Lambda> | null;
  routes: Route[] | null;
  images: ImagesConfig | null;
  build: BuildConfig | null;
}

Usage Examples:

import * as BuildOutputV1 from "@vercel/static-build/utils/build-output-v1";
import { Files, Lambda, NodeVersion } from '@vercel/build-utils';
import { Route } from '@vercel/routing-utils';
import { BuildConfig, ImagesConfig } from './_shared';

// Process v1 build output
const result = await BuildOutputV1.readBuildOutputDirectory({
  workPath: "/project",
  nodeVersion: { major: 18, range: "18.x", runtime: "nodejs18.x" }
});

if (result.staticFiles) {
  console.log("Static files found");
}

if (result.functions) {
  console.log("Serverless functions:", Object.keys(result.functions));
}

// Read specific configuration
const routes = await BuildOutputV1.readBuildOutputConfig<Route[]>({
  workPath: "/project",
  configFileName: "routes.json"
});

V1 Directory Structure:

.vercel_build_output/
├── config/
│   ├── build.json     # Build configuration
│   ├── routes.json    # Route definitions
│   └── images.json    # Image settings
├── static/            # Static files
└── functions/         # Serverless functions
    └── node/          # Node.js functions (legacy)

Build Output Detection Flow

The build function automatically detects and processes build output in priority order:

  1. Check for Build Output v3: Look for .vercel/output/config.json
  2. Check for Build Output v2: Look for .output/ with manifest files
  3. Check for Build Output v1: Look for .vercel_build_output/ directory
  4. Fall back to traditional: Process dist or configured output directory
// Detection flow in build function
const buildOutputPathV3 = await BuildOutputV3.getBuildOutputDirectory(outputDirPrefix);
if (buildOutputPathV3) {
  return BuildOutputV3.createBuildOutput(meta, buildCommand, buildOutputPathV3, framework);
}

const buildOutputPathV2 = await BuildOutputV2.getBuildOutputDirectory(outputDirPrefix);
if (buildOutputPathV2) {
  return await BuildOutputV2.createBuildOutput(workPath);
}

const extraOutputs = await BuildOutputV1.readBuildOutputDirectory({
  workPath,
  nodeVersion,
});

Serverless Functions Processing

All Build Output APIs support serverless functions with different configuration approaches:

V3 Functions: Configured in individual function directories V2 Functions: Defined in functions-manifest.json V1 Functions: Configured in config/functions.json

interface FunctionConfig {
  memory?: number;
  maxDuration?: number;
  runtime?: string;
  handler?: string;
  regions?: string[];
}

Middleware Support

Build Output APIs v2 and v3 support Edge middleware:

interface EdgeFunction {
  deploymentTarget: 'v8-worker';
  entrypoint: string;
  files: Files;
  name: string;
}

Middleware Route Configuration:

const middlewareRoute = {
  src: '/(.*)',
  middlewarePath: 'middleware',
  continue: true
};

Image Optimization Configuration

All Build Output APIs support image optimization settings:

interface ImagesConfig {
  domains: string[];
  sizes: number[];
}

Example image configuration:

{
  "domains": ["example.com", "cdn.example.com"],
  "sizes": [640, 750, 828, 1080, 1200, 1920, 2048, 3840]
}

Install with Tessl CLI

npx tessl i tessl/npm-vercel--static-build

docs

build-function.md

build-output.md

cache-management.md

framework-integration.md

index.md

tile.json