React + TypeScript + Vite + oRPC

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules, plus an oRPC server for type-safe API communication.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Command Guide

Prerequisites

Make sure you have Node.js 22.16.0 and pnpm installed.

Installation

# Install dependencies
pnpm install

Development

Start Development Servers

# Start both client and server (recommended - run in separate terminals)
pnpm run dev        # Client (React app) - http://localhost:5173
pnpm run dev:server # Server (oRPC API) - http://localhost:3888

# Or start them individually
pnpm run dev        # Client only
pnpm run dev:server # Server only

Port Configuration

• Client (Vite): http://localhost:5173
• Server (oRPC): http://localhost:3888
• Preview: http://localhost:4173

Building & Production

# Build the project (TypeScript compilation + Vite build)
pnpm run build

# Preview production build
pnpm run preview

Code Quality

# Run ESLint
pnpm run lint

# Format code with Prettier
pnpm run prettier

# Git hooks (runs automatically on commit)
pnpm run prepare  # Set up Husky git hooks

Project Structure

├── src/           # React client application
│   ├── App.tsx    # Main React component
│   └── main.tsx   # React app entry point
├── server/        # oRPC server implementation
│   ├── index.ts   # Server setup (port 3888)
│   └── router.ts  # API routes and procedures
└── public/        # Static assets

Development Workflow

1. Install dependencies: pnpm install
2. Start server: pnpm run dev:server (in one terminal)
3. Start client: pnpm run dev (in another terminal)
4. Open browser: Navigate to http://localhost:5173

The client will automatically connect to the oRPC server running on port 3888.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})