electron-vite-template

English | 简体中文

👀 Overview

📦 Ready out of the box - Modern Electron + Vite + React + TypeScript template
🎯 Based on the latest tech stack - React 19, Vite+ / Vite 8, Electron 37, Tailwind CSS 4
🌱 Easily extendable - Well-structured and customizable architecture
💪 Type-safe development - Full TypeScript support with strict mode
🔩 Unified tooling - Vite+ integrates Vite, Vitest, Oxlint, Oxfmt, and task running
🎨 Beautiful UI - shadcn/ui components with Tailwind CSS
🖥 Multi-window support - Easy to implement multiple windows
🔄 Auto-update - Built-in electron-updater integration
🔗 Type-safe IPC - tipc-electron for type-safe inter-process communication

🛫 Quick Setup

# clone the project
git clone https://github.com/canvascat/electron-vite-template.git

# enter the project directory
cd electron-vite-template

# install dependency
vp install

# develop
vp dev

🐞 Debug

🚀 Features

• React 19 - Latest React with concurrent features
• Vite+ / Vite 8 - Unified toolchain powered by Rolldown
• Electron 37 - Latest Electron with security improvements
• TypeScript 5.9 - Full type safety and IntelliSense
• Tailwind CSS 4 - Modern utility-first CSS framework
• shadcn/ui - Beautiful and accessible component library
• tipc-electron - Type-safe IPC communication with tRPC-like API
• Vite+ - Unified wrapper for dev, build, test, lint, format, and dependency workflows
• Oxlint / Oxfmt - Fast linting and formatting built into Vite+
• Vitest - Test runner provided through Vite+
• Playwright - End-to-end testing
• Auto-update - Built-in electron-updater integration

📂 Directory structure

Familiar React application structure with Electron integration:

├── electron                                 Electron-related code
│   ├── main                                 Main-process source code
│   │   ├── functions                       tipc-electron API routes
│   │   └── tipc.ts                         tipc-electron configuration
│   └── preload                              Preload-scripts source code
│
├── release                                  Generated after production build
│   └── {version}
│       ├── {os}-{os_arch}                   Unpacked application executable
│       └── {app_name}_{version}.{ext}       Installer for the application
│
├── public                                   Static assets
└── src                                      Renderer source code, React application
    ├── components/                          React components
    │   ├── ui/                             shadcn/ui components
    │   └── update/                         Auto-update components
    ├── assets/                             Static assets
    ├── lib/                                Utility functions
    │   └── tipc.ts                         tipc-electron client
    ├── type/                               TypeScript type definitions
    └── demos/                              Example code

🔧 Development

# Development
vp dev

# Build for production
vp build

# Preview production build
vp preview

# Run tests
vp build --mode=test && vp test

# Lint code
vp lint

# Format code
vp fmt . --write

🎨 UI Components

This template includes shadcn/ui components:

• Button - Versatile button component with variants
• Card - Content container with header, content, and footer
• Dialog - Modal dialog component
• Progress - Progress indicator
• Alert - Alert component for notifications
• Badge - Badge component for status indicators

To add more components:

vp dlx shadcn@latest add [component-name]

🔗 Type-Safe IPC Communication

This template uses tipc-electron for type-safe inter-process communication with a tRPC-like API design.

Features

• 🔒 Fully Type-Safe - End-to-end type inference powered by TypeScript
• 🚀 Easy to Use - Intuitive API design similar to tRPC
• 📡 Multiple Communication Modes - Support for request-response, event emission, and real-time subscriptions
• 🌊 Reactive Programming - Subscription mechanism based on RxJS Observable
• 🔄 Automated - Automatic management and cleanup of subscriptions

Quick Example

// Main process - Define API routes
export const appRouter = {
	counter: {
		subscribe: procedure.subscription(() => counter$),
		increment: procedure.handle(() => {
			const current = counter$.value;
			counter$.next(current + 1);
			return current + 1;
		}),
	},
	logger: {
		info: procedure.on((message: string) => {
			console.log(`[INFO] ${message}`);
		}),
	},
};

// Renderer process - Use the API
import tipc from "@/lib/tipc";

// Subscribe to real-time data
const unsubscribe = tipc.counter.subscribe.subscribe((count) => {
	console.log(`Counter: ${count}`);
});

// Call API methods
await tipc.counter.increment.invoke();
tipc.logger.info.emit("Counter incremented");

See TIPC Migration Guide for detailed documentation.

🔄 Auto Update

Built-in auto-update functionality using electron-updater. See update documentation for details.

🧪 Testing

• Tests: Vitest through Vite+
• E2E Tests: Playwright for end-to-end testing
• Component Tests: React Testing Library integration

📦 Package Management

This project uses Vite+ (vp) for dependency workflows and delegates to pnpm through the packageManager field:

# Install dependencies
vp install

# Add new dependency
vp add [package-name]

# Add development dependency
vp add -D [package-name]

🔧 Configuration Files

• vite.config.ts - Vite+ configuration for Vite, Vitest, Oxlint, Oxfmt, staged hooks, and Electron plugin
• electron-builder.json - Electron Builder configuration
• tsconfig.json - TypeScript configuration
• components.json - shadcn/ui configuration
• AGENTS.md - Vite+ agent instructions
• .vite-hooks/ - Vite+ Git hooks

🚨 Security Considerations

This template follows Electron Security Best Practices and disables Node.js API in the renderer process by default.

❔ FAQ

• C/C++ addons, Node.js modules - Pre-Bundling
• dependencies vs devDependencies
• shadcn/ui Documentation
• Tailwind CSS Documentation

📚 Documentation

• Development Guide - Detailed development guide
• 开发指南 - 详细的中文开发指南
• TIPC Migration Guide - Type-safe IPC communication guide
• Auto Update Documentation - Auto-update feature documentation

📄 License

MIT © canvascat