Build Process

Relevant source files

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

• vite.config.ts
• package.json
• tsconfig.json
• tsconfig.app.json
• tsconfig.node.json
• index.html
• src/main.tsx

The build process for the Character Sheet Maker is centered around Vite, a modern front-end build tool that provides a fast development experience and optimized production builds. The process involves TypeScript compilation, asset bundling, and CSS processing with Tailwind CSS.

The entire workflow is managed through npm scripts defined in package.json, which orchestrate tasks like starting the development server, creating a production build, and linting the codebase. The configuration is split across several files, including vite.config.ts for the bundler, and a set of tsconfig.*.json files for TypeScript compilation rules.

Core Technologies

The build system integrates several key technologies to create the final web application.

Technology	Role	Source
Vite	The core build tool and development server. It uses rolldown-vite for bundling.	package.json:39-42
TypeScript	Provides static typing for the application code. It is compiled before the Vite build step.	package.json:7, package.json:52
React (SWC)	The UI library, compiled using the Speedy Web Compiler (SWC) via a Vite plugin for performance.	package.json:48
Tailwind CSS	A utility-first CSS framework, integrated into the build process via a Vite plugin.	package.json:14, vite.config.ts:2

This diagram illustrates how the main technologies are configured and interact during the build.

NPM Scripts

The package.json file defines scripts to manage the development and build lifecycle.

Script	Command	Description
dev	vite	Starts the Vite development server for a live-reloading local environment.
build	tsc -b && vite build	First, runs the TypeScript compiler to check for errors (tsc -b), then creates an optimized production build using Vite.
lint	eslint .	Runs ESLint to analyze the code for potential errors and style issues.
preview	vite preview	Serves the production build locally to preview the final application.
Sources: package.json:6-9

Production Build Flow

The npm run build command executes a two-step process to ensure type safety and create an optimized bundle.

Vite Configuration

The main Vite configuration is located in vite.config.ts. It sets up the necessary plugins and path aliases for the project.

// 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-14

Plugins

• @vitejs/plugin-react-swc: Enables React support using the SWC compiler, which is significantly faster than Babel.
  Sources: vite.config.ts:2, package.json:48
• @tailwindcss/vite: Integrates Tailwind CSS, processing its directives and utility classes.
  Sources: vite.config.ts:1, package.json:14

Path Aliases

A path alias is configured to simplify imports from the src directory. The @ symbol maps directly to ./src.
Sources: vite.config.ts:10-12, tsconfig.json:11-13

TypeScript Configuration

The project uses a multi-project TypeScript setup, orchestrated by the root tsconfig.json.

// tsconfig.json
{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Sources: tsconfig.json:1-15

This root configuration references two other files:

• tsconfig.app.json: Contains compiler options for the application source code inside the src directory. It is configured for a browser environment ("lib": ["ES2022", "DOM", "DOM.Iterable"]) and JSX processing.
• tsconfig.node.json: Provides specific settings for Node.js-based files, such as vite.config.ts. It targets a newer ECMAScript version (ES2023) and includes Node types.

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

Application Entry Point

Vite uses index.html as the application's entry point. This file contains a div with the ID root where the React application is mounted, and it loads the main TypeScript module.

<!-- index.html -->
<!doctype html>
<html lang="en">
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Sources: index.html:1-10

The script at /src/main.tsx is responsible for rendering the React application into the #root element.
Sources: src/main.tsx:1-9

Dependencies

The build process relies on several packages listed in package.json.

Production Dependencies (dependencies)

These packages are included in the final application bundle.

Package	Version	Description
react	^19.2.0	The core React library.
react-dom	^19.2.0	Provides DOM-specific methods for React.
vite	npm:rolldown-vite@7.2.5	The build tool, overridden to use the rolldown-vite fork.
tailwindcss	^4.1.17	The CSS framework.
Sources: package.json:11-38

Development Dependencies (devDependencies)

These packages are used for development, linting, and the build process itself, but are not included in the production bundle.

Package	Version	Description
typescript	~5.9.3	The TypeScript language compiler.
@vitejs/plugin-react-swc	^4.2.2	Vite plugin for React using SWC.
eslint	^9.39.1	Linter for code quality.
@types/node	^24.10.1	Type definitions for Node.js.
Sources: package.json:39-55