2022-06-07 02:24:14 +08:00
# electron-vite-react
2021-11-06 22:27:23 +08:00
2022-06-10 09:16:43 +08:00
[](https://github.com/vitejs/awesome-vite)
2021-11-11 08:17:54 +08:00
2021-11-07 18:10:55 +08:00
[](https://nodejs.org/about/releases)
2021-11-06 22:27:23 +08:00
2022-06-10 09:16:43 +08:00
English | [简体中文 ](README.zh-CN.md )
2021-12-18 10:23:56 +08:00
2022-07-20 23:51:53 +08:00
## 👀 Overview
2021-12-18 10:23:56 +08:00
2022-07-20 23:51:53 +08:00
📦 Ready out of the box
🎯 Based on the official [react-ts ](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts ) template, project structure will be familiar to you
🌱 Easily extendable and customizable
💪 Supports Node.js API in the renderer process
🔩 Supports C/C++ native addons
2022-07-21 09:15:42 +08:00
🐞 Debugger configuration included
2022-07-20 23:51:53 +08:00
🖥 Easy to implement multiple windows
2021-12-18 10:23:56 +08:00
2022-07-20 23:51:53 +08:00
## 🛫 Quick start
2022-03-13 08:45:27 +08:00
```sh
npm create electron-vite
```
2022-06-07 07:22:07 +08:00
2022-04-25 08:51:42 +08:00
2022-07-21 09:15:42 +08:00
## 🐞 Debug
2022-04-25 08:51:42 +08:00
2022-06-07 07:22:07 +08:00
2022-03-13 08:45:27 +08:00
2022-07-20 23:51:53 +08:00
## 📂 Directory structure
2021-11-10 21:19:02 +08:00
2022-07-20 23:51:53 +08:00
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` *
2021-12-29 09:33:21 +08:00
2021-11-10 21:19:02 +08:00
```tree
2022-06-07 02:24:14 +08:00
├── electron Electron-related code
2022-06-27 10:15:29 +08:00
│ ├── main Main-process source code
2022-07-20 08:57:24 +08:00
│ ├── preload Preload-scripts source code
2022-06-27 10:15:29 +08:00
│ └── 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
│
2022-02-01 21:02:13 +08:00
├── release Generated after production build, contains executables
2022-07-11 08:43:06 +08:00
│ └── {version}
2022-06-27 10:15:29 +08:00
│ ├── {os}-unpacked Contains unpacked application executable
│ └── Setup.{ext} Installer for the application
│
2022-06-07 02:24:14 +08:00
├── public Static assets
└── src Renderer source code, your React application
2021-11-10 21:19:02 +08:00
```
2022-07-20 19:16:34 +08:00
## 🚨 Be aware
2022-01-31 12:49:04 +08:00
2022-07-20 23:51:53 +08:00
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 feauture. You will need 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/tree/main/packages/electron-renderer#config-presets-opinionated ).
2022-06-27 10:15:29 +08:00
2022-07-20 08:57:24 +08:00
```diff
# vite.config.ts
2022-06-28 10:41:23 +08:00
2022-07-20 08:57:24 +08:00
electron({
- renderer: {}
})
```
2022-01-31 12:49:04 +08:00
2022-07-20 23:51:53 +08:00
## ❔ FAQ
2022-01-31 12:49:04 +08:00
2022-07-20 08:57:24 +08:00
- [dependencies vs devDependencies ](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#dependencies-vs-devdependencies )
- [Using C/C++ native addons in Electron-Renderer ](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#load-nodejs-cc-native-modules )
- [Node.js ESM packages ](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#nodejs-esm-packages ) (e.g. `execa` `node-fetch` )
