React + TypeScript + Vite Boilerplate

This is a boilerplate for developing React applications using TypeScript and Vite. It includes a set of commonly used development tools to ensure code quality, consistency, and smooth CI/CD integration.

Technologies

• React - A JavaScript library for building user interfaces.
• TypeScript - Statically typed JavaScript for an improved development experience.
• Vite - A fast build tool and development server.

Development Tools

• Commitlint - Enforces conventional commit messages.
• Prettier - Ensures consistent code formatting and import order.
• ESLint - Lints code to maintain quality and prevent errors.
• Lint-staged - Runs pre-commit checks on staged files, ensuring only formatted code is committed.
• Vitest - A unit testing framework.
• Changeset - Manages versioning and release notes.
• GitHub Actions - Automates linting, testing, and formatting checks on pull requests and pushes.

Prerequisites

Ensure you have the following installed on your machine:

• Node.js (>= v24.14.1)
• PNPM (>= v10.6.3)

Getting Started

1. Clone the repository

   git clone <repo-url>
   cd <project-directory>

2. Install dependencies

   pnpm install

3. Run the development server

   pnpm dev

Open the app at http://localhost:5173.

Recommended Folder Structure

File imports within these directories will be automatically ordered by Prettier's import order configuration.

/src
├── assets     # Static assets
│ ├── img      # Image files
│ ├── styles   # Global styles
├── components # Presentational components
├── constants  # Constants and configuration
├── containers # Container components
├── hooks      # Custom React hooks
├── services   # Business logic and API calls
├── types      # TypeScript types and interfaces
├── utils      # Utility functions

Path Aliases

To simplify imports, this project uses the @/* alias to refer to the ./src/* directory.

Example usage:

import MyComponent from '@/components/MyComponent'

Available Scripts

The following scripts are available:

• pnpm build - Builds the app for production using Vite.
• pnpm lint - Runs ESLint to check code quality.
• pnpm prettier:fix - Formats code and assets using Prettier.
• pnpm test - Runs unit tests using Vitest.
• pnpm test:watch - Watches for changes and re-runs tests automatically.
• pnpm test:ui - Launches the Vitest UI for interactive test execution.

Applying Template Updates

If the template is updated, apply the changes using the following commands:

git remote add template <template-repo-url>
git fetch template
git cherry-pick <template-commit-id>