Electron + Vite + React + TypeScript Template

简体中文

This is a modern, opinionated template for building cross-platform desktop applications using Electron, Vite, React, and TypeScript. It leverages ESM (ECMAScript Modules) and pnpm for efficient dependency management, providing a clean and robust starting point for your projects.

Features

• Electron: Build cross-platform desktop applications.
• Vite: Fast development server and optimized build process for the React frontend.
• React: A declarative, component-based JavaScript library for building user interfaces.
• TypeScript: Statically typed superset of JavaScript for enhanced code quality and maintainability.
• ESM First: Embraces ECMAScript Modules throughout the project.
• pnpm: Efficient and fast package manager.
• Concurrent Development: Seamlessly run Electron and Vite development servers concurrently.
• Environment Variables: Configured with dotenv for flexible environment management.
• Clean Structure: Clear separation between Electron's main process and Vite's renderer process.

Project Structure

.
├── public/                 # Static assets for Vite (e.g., logo.png, react.svg, vite.svg)
├── src/                    # React frontend source code
│   ├── App.css
│   ├── App.tsx             # Main React component
│   ├── index.css
│   ├── main.tsx            # React entry point
│   └── assets/
├── electron/               # Electron main process source code
│   ├── main.ts             # Electron main entry point
│   ├── preload.js          # Preload script
│   └── tsconfig.electron.json # TypeScript config for Electron main process
├── dist/                   # Build output directory (ignored by Git)
├── .env.example            # Environment variables example
├── .gitignore              # Git ignore configuration
├── package.json            # Project dependencies and scripts
├── pnpm-lock.yaml          # pnpm lock file
├── pnpm-workspace.yaml     # pnpm workspace configuration
├── tsconfig.app.json       # TypeScript config for React app
├── tsconfig.json           # Root TypeScript config
├── tsconfig.node.json      # TypeScript config for Node.js environments
└── vite.config.ts          # Vite configuration

Getting Started

To get this project up and running, follow these steps:

1. Install Dependencies

pnpm install

2. Development Mode

To start the Electron application in development mode with a hot-reloading React frontend:

pnpm electron:dev

This command will:

• Compile the Electron main process.
• Concurrently start the Vite development server on http://localhost:3000 (or the port specified in .env).
• Wait for the Vite server to be ready.
• Launch the Electron application, loading the React frontend from the Vite development server.

3. Build for Production

To build the React frontend and Electron application for production:

pnpm build

This command will:

• Build the React frontend using Vite.
• Compile the Electron main process.

4. Production Preview

To run a production-like preview of the built Electron application:

pnpm electron

Scripts

• pnpm dev: Starts the Vite development server for the React frontend.
• pnpm lint: Lints the project files.
• pnpm preview: Previews the production build of the React frontend.
• pnpm build:vite: Builds the React frontend for production.
• pnpm build:electron: Compiles the Electron main process.
• pnpm build: Runs both build:vite and build:electron.
• pnpm start:dev: Launches the Electron application in development mode (requires main.js to be built and Vite server running).
• pnpm start:prod: Launches the Electron application with the production build.
• pnpm electron:dev: One-command development startup for both frontend and backend.
• pnpm electron:build: Builds the entire application and packages it using electron-builder.
• pnpm electron: Runs a production preview of the built Electron application.

Contributing

Feel free to open issues or submit pull requests. Any contributions are welcome!