Tooling: Vite Configuration

Relevant source files

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

• vite.config.ts
• package.json
• index.html
• tsconfig.json
• tsconfig.node.json
• tsconfig.app.json
• eslint.config.js

The Character-Sheet-Maker project uses Vite as its primary build tool and development server. Vite provides a fast and lean development experience for modern web projects. This configuration is responsible for bundling the React and TypeScript source code, processing styles with Tailwind CSS, and managing the overall build process for both development and production environments.

The setup is defined across several key files, including vite.config.ts for the main Vite settings, package.json for scripts and dependencies, and various tsconfig.*.json files for TypeScript integration. Notably, the project uses rolldown-vite, a Rust-based bundler, to accelerate the build process.

Core Configuration

The main Vite configuration is located in vite.config.ts. It is a standard ES module that exports a configuration object.

Sources: vite.config.ts

Plugins

The project utilizes two primary Vite plugins to handle React and Tailwind CSS integration.

Plugin	Purpose	Source
@vitejs/plugin-react-swc	Enables Fast Refresh for React development and uses the SWC compiler for high-performance transpilation.	vite.config.ts:2
@tailwindcss/vite	Integrates Tailwind CSS, processing its directives and generating the necessary CSS during the build.	vite.config.ts:1

// vite.config.ts
import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";
import { defineConfig } from "vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Sources: vite.config.ts:1-15

Path Aliases

To simplify module imports, a path alias is configured. The @ symbol is mapped to the src directory, allowing for cleaner import statements throughout the application (e.g., import { Canvas } from '@/components/sheet/Canvas').

This alias must be consistent with the TypeScript configuration to ensure proper type resolution.

// vite.config.ts:10-14
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },

Sources: vite.config.ts:10-14, tsconfig.app.json:23-25

Project Scripts and Dependencies

The package.json file defines the project's scripts, dependencies, and development dependencies, which are crucial for the Vite-based workflow.

Sources: package.json

NPM Scripts

The following scripts are available to manage the development and build lifecycle:

Script	Command	Description
dev	vite	Starts the Vite development server with Hot Module Replacement (HMR).
build	tsc -b && vite build	First, runs the TypeScript compiler to check for errors (-b for build mode), then bundles the application for production using Vite.
lint	eslint .	Runs ESLint to analyze the codebase for potential errors and style issues.
preview	vite preview	Serves the production build locally to preview the final application.

Sources: package.json:6-11

The diagram below illustrates the build script flow.

Key Dependencies

The project relies on several development dependencies to support the Vite toolchain.

Dependency	Version	Purpose
vite	npm:rolldown-vite@7.2.5	The core build tool. The version is overridden to use rolldown-vite for performance.
@vitejs/plugin-react-swc	^4.2.2	Vite plugin for React using the SWC compiler.
typescript	~5.9.3	Provides type-checking for the entire project.
tailwindcss	^4.1.17	A utility-first CSS framework used for styling.
@tailwindcss/vite	^4.1.17	Vite plugin for Tailwind CSS integration.
eslint	^9.39.1	Linter for identifying and fixing problems in JavaScript/TypeScript code.

The project explicitly overrides the vite dependency to use rolldown-vite, a performance-oriented bundler written in Rust, which aims to be a drop-in replacement for the standard Vite bundler.

// package.json:49-51
  "overrides": {
    "vite": "npm:rolldown-vite@7.2.5"
  }

Sources: package.json:49-51

TypeScript Integration

TypeScript is configured through a set of tsconfig.*.json files, ensuring type safety for both the application code and the Node.js-based tooling files like vite.config.ts.

The following diagram shows the relationship between the different TypeScript configuration files.

• tsconfig.json: The root configuration file that references the more specific app and node configurations. It also defines the base URL and path aliases that are inherited.
  Sources: tsconfig.json
• tsconfig.app.json: Configured for the application source code inside the src directory. It targets ES2022, enables JSX, and includes DOM libraries.
  Sources: tsconfig.app.json
• tsconfig.node.json: Specifically for Node.js-based scripts. It targets ES2023 and is configured to type-check vite.config.ts.
  Sources: tsconfig.node.json

Application Entry Point

Vite uses index.html as the application's main entry point. During development and in the build process, Vite automatically injects the compiled JavaScript.

The entry script is specified via a <script> tag with type="module".

<!-- index.html:9-10 -->
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>

Sources: index.html:9-11

The development server workflow is illustrated below.

Summary

The tooling configuration for Character-Sheet-Maker is a modern, performance-focused setup centered around Vite. It leverages the SWC compiler for fast React transpilation, integrates seamlessly with Tailwind CSS, and uses rolldown-vite to further enhance build speeds. The TypeScript configuration is robust, providing separate environments for the application code and build scripts, ensuring type safety across the entire development workflow. This streamlined toolchain enables a rapid and efficient development cycle.