Home

Awesome

electron-vite-react

awesome-vite GitHub stars GitHub issues GitHub license Required Node.JS >= 14.18.0 || >=16.0.0

English | įŽ€äŊ“中文

👀 Overview

đŸ“Ļ 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

đŸ›Ģ Quick Setup

# clone the project
git clone https://github.com/electron-vite/electron-vite-react.git

# enter the project directory
cd electron-vite-react

# install dependency
npm install

# develop
npm run dev

🐞 Debug

electron-vite-react-debug.gif

📂 Directory structure

Familiar React application structure, just with electron folder on the top :wink:
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
<!-- ## 🚨 Be aware 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](https://github.com/electron-vite/vite-plugin-electron-renderer#config-presets-opinionated). ```diff # vite.config.ts export default { plugins: [ ... - // Use Node.js API in the Renderer-process - renderer({ - nodeIntegration: true, - }), ... ], } ``` -->

🔧 Additional features

  1. electron-updater 👉 see docs
  2. playwright

❔ FAQ