:electron: Electron + Vite + React + Sass boilerplate.

electron nodejs react sass typescript vite

Go to file

草鞋没号 45f9205eac chore: bump deps		2022-11-25 09:00:04 +08:00
.vscode	build(vscode_debug): add skipFiles	2022-11-04 22:06:17 +08:00
electron	chore: VITE_DEV_SERVER_URL instead `app.isPackaged`	2022-11-22 08:15:04 +08:00
public	📦 refactor: package, static, editorconfig	2022-06-06 12:42:38 +03:00
src	fix(#78 ): correct image src	2022-10-30 08:38:02 +08:00
.editorconfig	📦 refactor: package, static, editorconfig	2022-06-06 12:42:38 +03:00
.gitignore	v2.1.0: use `vite-electron-plugin` instead `vite-plugin-electron`	2022-10-03 10:43:13 +08:00
LICENSE	Initial commit	2021-11-01 01:54:59 +00:00
README.md	docs: update	2022-11-19 08:36:32 +08:00
README.zh-CN.md	docs: update	2022-11-19 08:36:32 +08:00
electron-builder.json5	Merge pull request #70 from electron-vite/v2.1.0	2022-10-04 07:18:22 +08:00
index.html	template-react-ts/index.html	2022-06-05 08:30:46 +08:00
package.json	chore: bump deps	2022-11-25 09:00:04 +08:00
tsconfig.json	chore: update include	2022-08-29 09:26:32 +08:00
tsconfig.node.json	update types	2022-09-13 14:40:17 +08:00
vite.config.ts	chore: bump vite-plugin-electron-renderer to 0.11.3	2022-11-19 08:36:16 +08:00

README.md

electron-vite-react

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 start

npm create electron-vite

🐞 Debug

📂 Directory structure

Familiar React application structure, just with electron folder on the top 😉
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
│   └── 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
|       └── iconset               
|           └── 256x256.png       Icon for the application on Linux
│
├── 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

🚨 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.

# vite.config.ts

export default {
  plugins: [
-   // Use Node.js API in the Renderer-process
-   renderer({
-     nodeIntegration: true,
-   }),
  ],
}