3.3 KiB

Raw Blame History

electron-vite-react

Overview

📦 Out of the box
🎯 Based on the official react-ts template, less invasive
🌱 Extensible, really simple directory structure
💪 Support using Node.js API in Electron-Renderer
🔩 Support C/C++ native addons
🖥 It's easy to implement multiple windows

Quick start

npm create electron-vite

Debug

Directory structure

🚨 By default, the files in electron folder will be built into the dist/electron

├── electron                  Electron-related code
│   ├── main                  Main-process source code
│   ├── preload               Preload-scripts source code
│   └── resources             Resources for the production build
│       ├── icon.icns             Icon for the application on macOS
│       ├── icon.ico              Icon for the application
│       ├── installerIcon.ico     Icon for the application installer
│       └── uninstallerIcon.ico   Icon for the application uninstaller
│
├── release                   Generated after production build, contains executables
│   └── {version}
│       ├── {os}-unpacked     Contains unpacked application executable
│       └── Setup.{ext}       Installer for the application
│
├── public                    Static assets
└── src                       Renderer source code, your React application

🚨 Be aware

By default, this template integrates Node.js in the Renderer process. If you don't need it, you just remove the option below. Because it will modify the default config of Vite.

# vite.config.ts

electron({
- renderer: {}
})

FAQ

dependencies vs devDependencies
Using C/C++ native addons in Electron-Renderer
Node.js ESM packages (e.g. execa node-fetch)

3.3 KiB Raw Blame History