Do I need to restart the TypeScript server after changing tsconfig paths or aliases?

Yes. After updating tsconfig.json paths or alias mappings, restart your IDE's TS server or your editor to pick up the new types.

How do I ensure the aliases and tsconfig paths stay in sync?

Update both vite.config.ts resolve.alias and tsconfig.json paths to mirror each other (e.g., '@/*': ['./src/*'] and '@/*': ['src/*']), then run a type check to verify.

How should I use environment variables in the app code?

Access them with import.meta.env.VITE_YOUR_VAR and provide a corresponding VITE_YOUR_VAR in .env or .env.example. Prefer typing for env vars if possible and avoid exposing secrets in the client bundle.

vite-react-ts-config

Scanned

npx machina-cli add skill andireuter/skills-webapp/vite-react-ts-config --openclaw

Files (1)

SKILL.md

1.0 KB

Vite Config (React-TS) Skill

You are editing a Vite + React + TypeScript project’s configuration.

Rules / best practices

Use vite.config.ts and export via defineConfig().
Keep config minimal; only add what’s needed for the user’s stated goal.
Prefer stable patterns:
- path aliases via resolve.alias (and also ensure tsconfig paths match if used)
- environment variables via import.meta.env (VITE_ prefix)
Avoid relying on obscure plugins unless requested.

Deliverables

Show the intended vite.config.ts contents (or diff-style summary).
If adding aliases, also update tsconfig.json paths (and mention restarting TS server).
If adding env usage, show .env.example and safe usage notes.

Use template.md as the default structure.

Source

git clone https://github.com/andireuter/skills-webapp/blob/main/skills/vite-react-ts-config/SKILL.mdView on GitHub

Overview

This skill creates or updates vite.config.ts for a Vite + React + TypeScript project, applying best practices. It emphasizes using defineConfig, keeping the config minimal, setting path aliases, and leveraging VITE_ prefixed environment variables, with optional alignment to tsconfig paths for consistency.

How This Skill Works

The config exports defineConfig from vite and wires in the React plugin. It defines resolve.alias to map aliases (for example '@' to the src directory) and notes that tsconfig paths should mirror these aliases. Environment values are accessed via import.meta.env.VITE_* and sensible defaults are provided for server and build options.

When to Use It

Starting a new Vite + React + TS project and planning a clean, minimal config.
Adding or aligning path aliases (eg. @/components) to simplify imports.
Configuring environment variables to switch endpoints or feature flags without hard-coding values.
Preparing for production deployment with basePath, proxy, or server/build defaults.
Synchronizing tsconfig.json paths with alias mappings after introducing aliases.

Quick Start

Step 1: Create vite.config.ts and import { defineConfig } from 'vite' and react from '@vitejs/plugin-react'.
Step 2: Add resolve.alias to map '@' to path.resolve(__dirname, 'src') and ensure tsconfig.json paths mirror it.
Step 3: Introduce VITE_ env usage (import.meta.env.VITE_*), add a .env.example with safe defaults, and restart the dev server and TS server.

Best Practices

Use vite.config.ts and export via defineConfig() for type safety and editor support.
Keep the configuration minimal; only add what’s needed to reach the stated goal.
Define path aliases with resolve.alias and ensure tsconfig.json paths match the aliases.
Use environment variables with import.meta.env and the VITE_ prefix for runtime access.
Avoid unnecessary plugins; restart the TS server after changing tsconfig paths or aliases.

Example Use Cases

Example: Vite config with an alias '@' -> './src' and React plugin wired up for a TS project.
Example: Dev server proxy setup to forward '/api' to a backend during development.
Example: Using VITE_API_BASE_URL from .env.example to switch API endpoints without code changes. .env.example content: VITE_API_BASE_URL=https://api.example.com VITE_APP_NAME=MyApp
Example: Aligning tsconfig paths with the alias ('@/*' -> './src/*') and restarting the TS server.
Example: Deploying to a subpath by setting base: '/my-app/' in vite.config.ts for GitHub Pages or similar hosts.

Frequently Asked Questions

Add this skill to your agents