Implementation:PrefectHQ Prefect Vite Build Configuration

Knowledge Sources	PrefectHQ_Prefect Vite Docs Vitest Docs
Domains	Frontend, Build_System, Testing
Last Updated	2026-02-09 22:00 GMT

Overview

Vite configuration defining the build tool, test runner (Vitest), path aliases, plugins, and manual chunk-splitting strategy for the ui-v2 React application.

Description

The ui-v2/vite.config.ts configures the complete frontend build pipeline. It registers the TanStackRouterVite plugin (with auto code-splitting) and React SWC plugin for fast JSX compilation. Path aliases map `@/` to `src/` and `@tests/` to `tests/`. Vitest is configured with jsdom environment, thread-based pooling, and UTC timezone. The production build defines manual chunk splitting that separates vendor bundles into targeted groups: `vendor-react` (React core), `vendor-tanstack` (TanStack ecosystem), `vendor-recharts` (charting), `vendor-codemirror` (code editor), `vendor-radix` (25 Radix UI primitives), `vendor-date` (date-fns, cron-parser, rrule), `vendor-graphs` (@prefecthq/graphs), `vendor-forms` (react-hook-form, Zod), and `vendor-markdown` (react-markdown, remark-gfm).

Usage

Reference this file when modifying the ui-v2 build pipeline, adding new Vite plugins, adjusting test configuration, or optimizing the production bundle chunking strategy.

Code Reference

Source Location

• Repository: PrefectHQ_Prefect
• File: ui-v2/vite.config.ts
• Lines: 1-106

Signature

import path from "node:path";
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vitest/config";

export default defineConfig(({ mode }) => {
    const base = mode === "development"
        ? ""
        : "/PREFECT_UI_SERVE_BASE_REPLACE_PLACEHOLDER";

    return {
        base,
        plugins: [
            TanStackRouterVite({ autoCodeSplitting: true }),
            react(),
        ],
        test: {
            globals: true,
            environment: "jsdom",
            setupFiles: "./tests/setup.ts",
            pool: "threads",
            exclude: ["e2e/**", "node_modules/**"],
        },
        resolve: {
            alias: {
                "@": path.resolve(__dirname, "./src"),
                "@tests": path.resolve(__dirname, "./tests"),
            },
        },
        build: {
            sourcemap: true,
            rollupOptions: {
                output: {
                    manualChunks: {
                        "vendor-react": ["react", "react-dom"],
                        "vendor-tanstack": [
                            "@tanstack/react-query",
                            "@tanstack/react-router",
                            "@tanstack/react-table",
                            "@tanstack/react-virtual",
                        ],
                        "vendor-recharts": ["recharts"],
                        "vendor-codemirror": [...],
                        "vendor-radix": [...],
                        "vendor-date": [...],
                        "vendor-graphs": ["@prefecthq/graphs"],
                        "vendor-forms": ["react-hook-form", "@hookform/resolvers", "zod"],
                        "vendor-markdown": ["react-markdown", "remark-gfm"],
                    },
                },
            },
        },
    };
});

Import

# Not importable; consumed by Vite CLI
cd ui-v2
npx vite          # Dev server using this config
npx vite build    # Production build using this config
npx vitest        # Test runner using this config

I/O Contract

Inputs

Name	Type	Required	Description
mode	string	Yes	Build mode ("development" or "production")
plugins	array	Yes	Vite plugins (TanStack Router, React SWC)
resolve.alias	object	No	Path alias mappings (@/ → src/, @tests/ → tests/)
build.rollupOptions.output.manualChunks	object	No	Manual chunk splitting configuration
test	object	No	Vitest configuration (environment, pool, excludes)

Outputs

Name	Type	Description
dist/	directory	Production build output with chunked vendor bundles
Dev server	HTTP	Vite dev server with HMR at localhost:5173
Test results	stdout	Vitest test execution output

Usage Examples

Development Server

cd ui-v2
npm run dev
# Starts Vite dev server with:
# - TanStack Router auto code-splitting
# - React SWC fast refresh
# - Path aliases (@/ and @tests/)
# - Base path "" for development

Production Build with Chunk Analysis

cd ui-v2

# Build for production (generates optimized chunks)
npm run build

# Analyze the resulting bundle sizes
npm run analyze

# Expected chunks:
# - vendor-react.js      (React core)
# - vendor-tanstack.js   (Query, Router, Table, Virtual)
# - vendor-recharts.js   (Charts - lazy loaded)
# - vendor-codemirror.js (Code editor - lazy loaded)
# - vendor-radix.js      (UI primitives)
# - vendor-date.js       (Date utilities)
# - vendor-forms.js      (Form handling)
# - vendor-markdown.js   (Markdown rendering)
# - vendor-graphs.js     (Flow visualization)