#2766: vite.config.ts

projectforge-webapp/vite.config.ts Vite Build Configuration · projectforge-webapp/vite.config.ts 62 lines · 59 code · 1 comments · 2 blank

The Vite build system configuration file that replaced Create React App's webpack-based toolchain. This single file orchestrates the entire development and build pipeline: JSX/TSX transformation via @vitejs/plugin-react, a custom esbuild plugin for handling JSX in third-party .js node_modules (like react-rrule-generator), SCSS compilation, dev server proxying to the Java backend, and Vitest test runner configuration. Created during the major migration that eliminated 43 npm vulnerabilities by replacing the deprecated react-scripts dependency chain with Vite's leaner tooling stack.

Architecture

Custom Plugin: rruleJsxPlugin

This is the most unusual part of the configuration. Some npm packages (notably react-rrule-generator) ship .js files containing JSX syntax, which Vite normally only processes in .jsx files. The rruleJsxPlugin intercepts module transformations with enforce: 'pre', detects any .js file coming from the react-rrule-generator package (or any node_modules file containing JSX-like patterns via the regex /<[A-Z]\w*[\s/>]/), and runs it through esbuild with loader: 'jsx'. This avoids errors from Vite encountering raw JSX in .js files. The output targets cjs format with esnext standard.

Plugin Pipeline

rruleJsxPlugin() runs first (enforce: pre) to transform non-standard JSX files, then react() (the official Vite React plugin) handles standard JSX/TSX transformation with Fast Refresh support.

SCSS Configuration

The css.preprocessorOptions.scss.loadPaths setting adds ./node_modules to the SCSS import path, allowing @import "bootstrap/scss/bootstrap" style imports without relative path traversal.

Build Configuration

Output goes to build/ (matching the CRA convention), sourcemaps are disabled, minification is off (server-side Wicket handles asset optimization), and maxParallelFileOps: 1 limits parallel file operations — a workaround for file handle exhaustion on some systems.

Dev Server Proxy

Two proxy rules forward /rs and /rest requests to http://localhost:8080 (the Spring Boot backend). This is the critical piece that made baseURL in rest.js work as an empty string — the Vite proxy handles the prefix routing, so the React app always calls relative URLs and the dev server transparently forwards them to the appropriate backend endpoint.

Testing: Vitest

Replaces Jest (CRA's test runner). Configured with jsdom environment (browser-like DOM for component tests), globals: true (so it, expect, describe work without imports), and test file patterns matching .test. and .spec. suffixes for all JS/TS variants.

Git History

Commit	What changed
`bf988bc6d`	Created the file as part of the comprehensive react-scripts→Vite migration. Introduced the complete toolchain: Vite plugins, the custom rrule JSX handler, SCSS support, dev proxy with dual backend routes, build configuration, and Vitest test runner setup. This single file replaced the entire CRA webpack configuration layer.