electron-vite-react

awesome-vite GitHub stars GitHub issues GitHub license Required Node.JS >= v14.17.0

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

electron-vite-react.gif

Debug

electron-vite-react-debug.gif

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