Vite Build Configuration

Relevant source files

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

• vite.config.ts
• package.json
• index.html
• src/WorkbenchContext.tsx
• README.md

The Vite Build Configuration serves as the foundation for the development and deployment of the ONNX-Station application (identified as react-example in the configuration). It leverages Vite 6 as a modern frontend build tool to provide a fast development environment and optimized production bundles.

The configuration integrates React and Tailwind CSS via specialized plugins, manages module resolution through aliases, and implements environment-specific server behaviors tailored for collaborative editing environments like Google AI Studio.

Sources: package.json:2-3, vite.config.ts:6-23, README.md:9-12

Core Build Orchestration

The project utilizes Vite's standard CLI for lifecycle management, including development, production builds, and local previews. The build process targets a module-based architecture ("type": "module") and uses TypeScript for type safety without emitting files during linting.

Build Lifecycle Scripts

The following scripts define how the application is built and served:

Script	Command	Purpose
dev	vite --port=3000 --host=0.0.0.0	Starts the development server on port 3000, accessible across the local network.
build	vite build	Generates an optimized production bundle in the dist directory.
preview	vite preview	Serves the locally built dist folder for final verification.
clean	rm -rf dist server.js	Removes build artifacts and temporary server files.
lint	tsc --noEmit	Runs the TypeScript compiler for type checking without generating output.

Sources: package.json:5-11

Entry Point and Dependency Mapping

The build starts at index.html, which identifies the main entry point as /src/main.tsx.

Plugin Architecture and Resolution

The configuration utilizes a plugin-based architecture to extend Vite's core functionality, specifically for React 19 support and Tailwind CSS 4 integration.

• @vitejs/plugin-react: Enables Fast Refresh and JSX transformation for React 19.
• @tailwindcss/vite: Provides the integration for the Tailwind CSS 4 engine.
• Path Aliasing: A resolve alias is configured to map @ to the root directory (.), allowing for clean imports regardless of file nesting levels.

Sources: vite.config.ts:1-12, package.json:14-25

Development Server Configuration

The development server includes specific logic to handle high-frequency edits in cloud-based agent environments.

Hot Module Replacement (HMR) Control

The server behavior is dynamically adjusted based on the DISABLE_HMR environment variable. This is specifically designed to prevent flickering or excessive CPU usage during automated edits by AI agents.

HMR*: Disabled if DISABLE_HMR is 'true'.

• File Watching: Set to null if DISABLE_HMR is 'true' to save CPU cycles.

Sources: vite.config.ts:14-21

Production Considerations

While the primary build is handled by Vite, the project includes auxiliary configurations for production-like environments, such as a clean script that targets a server.js file (suggesting an Express-based wrapper for deployment).

Dependencies and Optimization

The build bundles several heavy-weight libraries, including:

• onnxruntime-web: For client-side AI inference.
• d3: For complex data visualizations like the ONNX graph distribution.
• motion: For UI animations.

Sources: package.json:14-26, src/WorkbenchContext.tsx:1-4

Summary

The Vite build configuration in ONNX-Station provides a robust, React-optimized pipeline that balances developer experience with the specific requirements of AI Studio's agent-based editing. By toggling HMR and file watching via environment variables, the system ensures stability during automated code modifications while maintaining a high-performance production build path via Vite 6.

Sources: vite.config.ts:14-21, package.json:1-12