React + TypeScript + Vite + Tailwind+shadcn

This template provides a minimal setup to get React working in Vite with HMR. Additional support :

• Eslint on precommit hook
• Prettier support is also added for onsave in VSC
• Vitest and React Test Library for testing
• Tailwind CSS v4 with shadcn/ui components and Radix UI
• DevContainer for VS Code
• GitHub Actions CI pipelines

Install Precommit Hooks

npm install && npx husky init && echo npx lint-staged > .husky/pre-commit

Install template dependencies

nvm use # from project directory to set correct node version npm install npm run dev

Local ESLint Configuration

For personal ESLint overrides that shouldn't be committed to the repository, create an optional eslint.config.local.js file:

// eslint.config.local.js - not checked into git
export const localIgnores = ['my-temp-folder/', 'experimental/**'];

export const localRules = {
  'no-console': 'off',
  '@typescript-eslint/no-unused-vars': 'warn',
};

This file is automatically imported by the main ESLint config and allows you to:

• Add personal ignore patterns without affecting the team
• Override specific rules for your development workflow
• Keep experimental or temporary configurations local

The file is optional - ESLint will work normally if it doesn't exist.

Features Included

Development Tools

• Vite - Fast build tool with HMR (Hot Module Replacement)
• TypeScript - Type safety with path aliases (@/ maps to src/)
• ESLint - Code linting with React and TypeScript rules
• Prettier - Code formatting with Tailwind CSS plugin
• Husky - Git hooks for pre-commit linting and formatting

UI Framework

• Tailwind CSS v4 - Utility-first CSS framework
• shadcn/ui - High-quality React components with design tokens
• Radix UI - Accessible component primitives
• Lucide React - Beautiful icon library

Testing Setup

• Vitest - Fast unit testing framework
• React Testing Library - Component testing utilities
• jsdom - DOM environment for testing
• @testing-library/jest-dom - Custom Jest matchers

CI/CD

• GitHub Actions - Automated CI pipeline with:
  • Dependency installation
  • Code linting
  • Build verification
  • Test execution
  • PR failure notifications

Development Container

• DevContainer - VS Code development container setup
• Docker - Containerized development environment
• Auto-install - Dependencies and dev server auto-start

Environment Variables

Environment variables are type-safe through src/vite-env.d.ts. Add new variables to the ImportMetaEnv interface:

interface ImportMetaEnv {
  readonly VITE_APP_NAME: string;
  readonly VITE_API_URL: string; // Add new variables here
}

Env vars are loaded by Vite in the following order

[mode] = test / development

1. .env.[mode].local - Highest Priority. Development mode only. Never committed, used for secrets.
2. .env.[mode] - Development or Test mode (can be committed, common team or mock settings)
3. .env.local - Always loaded useful for local secrets, never commit.
4. .env - Base settings, lowest priority and always loaded. Can be committed.

Available Scripts

• npm run dev - Start development server with debug output
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint
• npm run test - Run tests once
• npm run test:watch - Run tests in watch mode

VS Code Integration

• Prettier - Format on save enabled
• Tailwind CSS - IntelliSense and syntax highlighting
• TypeScript - Full language support with path aliases
• ESLint - Real-time linting with auto-fix