electron-vite-react

English | 简体中文

Overview

📦 Out of the box
🎯 Based on the official react-ts template, less invasive
🌱 Simple directory structure，real flexible
💪 Support Use Electron、Node.js API and 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-script 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

🚨 dependencies vs devDependencies

Put Node.js packages in dependencies

e.g. electron-store sqlite3 serilaport mongodb ...others

Put Web packages in devDependencies

e.g. react react-dom react-router mobx zustand antd axios ...others

See more 👉 dependencies vs devDependencies

🚨 ESM packages

e.g. node-fetch execa got ...others

1. npm i vite-plugin-esmodule -D
2. Configure in vite.config.ts

import esmodule from 'vite-plugin-esmodule'
export default {
  plugins: [
    esmodule(['got', 'execa', 'node-fetch']),
  ],
}