To create electron projects with react using vite

by React

electron-vite-react

English | 简体中文

Overview

? Out of the box ? Based on react-ts template, less invasive ? Simple directory structure，real flexible ? Support Use Electron、Node.js API and in Renderer-process ? 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 Node.js packages

Put Web packages in devDependencies

? e.g.

  • react
  • react-dom
  • react-router
  • mobx
  • zustand
  • antd
  • axios
  • …others Web packages

TODO: ESM packages

  • node-fetch
  • execa
  • …others ESM packages

See more ? dependencies vs devDependencies

GitHub

View Github