English | 简体中文
📦 Ready out of the box
🎯 Based on the official template-react-ts, project structure will be familiar to you
🌱 Easily extendable and customizable
💪 Supports Node.js API in the renderer process
🔩 Supports C/C++ native addons
🐞 Debugger configuration included
🖥 Easy to implement multiple windows
npm create electron-vite
Familiar React application structure, just with electron
folder on the top 😉
Files in this folder will be separated from your React application and built into dist-electron
├── electron Electron-related code
│ ├── main Main-process source code
│ └── preload Preload-scripts source code
│
├── release Generated after production build, contains executables
│ └── {version}
│ ├── {os}-{os_arch} Contains unpacked application executable
│ └── {app_name}_{version}.{ext} Installer for the application
│
├── public Static assets
└── src Renderer source code, your React application
This template integrates Node.js API to the renderer process by default. If you want to follow Electron Security Concerns you might want to disable this feature. You will have to expose needed API by yourself.
To get started, remove the option as shown below. This will modify the Vite configuration and disable this feature.
# vite.config.ts
export default {
plugins: [
...
- // Use Node.js API in the Renderer-process
- renderer({
- nodeIntegration: true,
- }),
...
],
}
- electron-updater 👉 see docs
- playwright
- npx prisma generate (run only if the command is never executed)
- npx prisma migrate (run every time if you change anything in DB schema)
- npm run build