electron-vite-react/README.md

# electron-vite-react

[![awesome-vite](https://awesome.re/mentioned-badge.svg)](https://github.com/vitejs/awesome-vite)
![GitHub stars](https://img.shields.io/github/stars/caoxiemeihao/vite-react-electron?color=fa6470&style=flat)
![GitHub issues](https://img.shields.io/github/issues/caoxiemeihao/vite-react-electron?color=d8b22d&style=flat)
![GitHub license](https://img.shields.io/github/license/caoxiemeihao/vite-react-electron?style=flat)
[![Required Node.JS >= v14.17.0](https://img.shields.io/static/v1?label=node&message=%3E=14.17.0&logo=node.js&color=3f893e&style=flat)](https://nodejs.org/about/releases)

English | [简体中文](README.zh-CN.md)

## Overview

📦 Out of the box  
🎯 Based on the official [react-ts](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) template, less invasive  
🌱 Extensible, really simple directory structure  
💪 Support using Node.js API in Electron-Renderer  
🔩 Support C/C++ native addons  
🖥 It's easy to implement multiple windows  

## Quick start

```sh
npm create electron-vite
```

![electron-vite-react.gif](https://github.com/electron-vite/electron-vite-react/blob/main/public/electron-vite-react.gif?raw=true)

## Debug

![electron-vite-react-debug.gif](https://github.com/electron-vite/electron-vite-react/blob/main/public/electron-vite-react-debug.gif?raw=true)

## Directory structure

*🚨 By default, the files in `electron` folder will be built into the `dist/electron`*

```tree
├── electron                  Electron-related code
│   ├── main                  Main-process source code
│   ├── preload               Preload-scripts 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
```

## 🚨

By default, this template integrates Node.js in the Renderer process. If you don't need it, you just remove the option below. [Because it will modify the default config of Vite](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#config-presets-opinionated).

```diff
# vite.config.ts

electron({
- renderer: {}
})
```

## FAQ

- [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`)
doc: (CHANGES NEEDED) update readme 2022-06-07 02:24:14 +08:00			`# electron-vite-react`
chore(docs): add README.md 2021-11-06 22:27:23 +08:00
docs: v2.0.0 2022-06-10 09:16:43 +08:00			`[![awesome-vite](https://awesome.re/mentioned-badge.svg)](https://github.com/vitejs/awesome-vite)`
chore: UPDATE 2021-11-11 08:17:54 +08:00			`![GitHub stars](https://img.shields.io/github/stars/caoxiemeihao/vite-react-electron?color=fa6470&style=flat)`
			`![GitHub issues](https://img.shields.io/github/issues/caoxiemeihao/vite-react-electron?color=d8b22d&style=flat)`
			`![GitHub license](https://img.shields.io/github/license/caoxiemeihao/vite-react-electron?style=flat)`
chore(deps): node >=14.17.0 2021-11-07 18:10:55 +08:00			`[![Required Node.JS >= v14.17.0](https://img.shields.io/static/v1?label=node&message=%3E=14.17.0&logo=node.js&color=3f893e&style=flat)](https://nodejs.org/about/releases)`
chore(docs): add README.md 2021-11-06 22:27:23 +08:00
docs: v2.0.0 2022-06-10 09:16:43 +08:00			`English \| [简体中文](README.zh-CN.md)`
chore(docs): UPDATE 2021-12-18 10:23:56 +08:00
			`## Overview`

docs: v2.0.0 2022-06-10 09:16:43 +08:00			`📦 Out of the box`
docs: update 2022-06-29 16:08:04 +08:00			`🎯 Based on the official [react-ts](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) template, less invasive`
docs: 🚨 Node.js ESM packages 2022-07-11 08:43:06 +08:00			`🌱 Extensible, really simple directory structure`
			`💪 Support using Node.js API in Electron-Renderer`
docs: update 2022-06-13 09:54:41 +08:00			`🔩 Support C/C++ native addons`
docs: v2.0.0 2022-06-10 09:16:43 +08:00			`🖥 It's easy to implement multiple windows`
chore(docs): UPDATE 2021-12-18 10:23:56 +08:00
docs: update 2022-04-25 08:51:42 +08:00			`## Quick start`
docs: update Usage 2022-03-13 08:45:27 +08:00
			```sh
			`npm create electron-vite`
			```

Update README.md 2022-06-07 07:22:07 +08:00			`![electron-vite-react.gif](https://github.com/electron-vite/electron-vite-react/blob/main/public/electron-vite-react.gif?raw=true)`
docs: update 2022-04-25 08:51:42 +08:00
			`## Debug`

Update README.md 2022-06-07 07:22:07 +08:00			`![electron-vite-react-debug.gif](https://github.com/electron-vite/electron-vite-react/blob/main/public/electron-vite-react-debug.gif?raw=true)`
docs: update Usage 2022-03-13 08:45:27 +08:00
Builder config, icons and typos in README 2022-02-01 21:02:13 +08:00			`## Directory structure`
chore(docs): UPDATE 2021-11-10 21:19:02 +08:00
docs: v2.0.0 2022-06-10 09:16:43 +08:00			🚨 By default, the files in `electron` folder will be built into the `dist/electron`
chore(docs): update 2021-12-29 09:33:21 +08:00
chore(docs): UPDATE 2021-11-10 21:19:02 +08:00			```tree
doc: (CHANGES NEEDED) update readme 2022-06-07 02:24:14 +08:00			`├── electron Electron-related code`
docs: update 2022-06-27 10:15:29 +08:00			`│ ├── main Main-process source code`
docs: update 2022-07-20 08:57:24 +08:00			`│ ├── preload Preload-scripts source code`
docs: update 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`
			`│`
Builder config, icons and typos in README 2022-02-01 21:02:13 +08:00			`├── release Generated after production build, contains executables`
docs: 🚨 Node.js ESM packages 2022-07-11 08:43:06 +08:00			`│ └── {version}`
docs: update 2022-06-27 10:15:29 +08:00			`│ ├── {os}-unpacked Contains unpacked application executable`
			`│ └── Setup.{ext} Installer for the application`
			`│`
doc: (CHANGES NEEDED) update readme 2022-06-07 02:24:14 +08:00			`├── public Static assets`
			`└── src Renderer source code, your React application`
chore(docs): UPDATE 2021-11-10 21:19:02 +08:00			```

docs: update 2022-07-20 08:57:24 +08:00			`## 🚨`
docs: update 2022-01-31 12:49:04 +08:00
docs: update 2022-07-20 08:57:24 +08:00			`By default, this template integrates Node.js in the Renderer process. If you don't need it, you just remove the option below. [Because it will modify the default config of Vite](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#config-presets-opinionated).`
docs: update 2022-06-27 10:15:29 +08:00
docs: update 2022-07-20 08:57:24 +08:00			```diff
			`# vite.config.ts`
docs: `dependencies` vs `devDependencies` 2022-06-28 10:41:23 +08:00
docs: update 2022-07-20 08:57:24 +08:00			`electron({`
			`- renderer: {}`
			`})`
			```
docs: update 2022-01-31 12:49:04 +08:00
docs: update 2022-07-20 08:57:24 +08:00			`## FAQ`
docs: update 2022-01-31 12:49:04 +08:00
docs: update 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`)