vite-react-electron

English | 简体中文

Run Setup

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

# enter the project directory
cd vite-react-electron

# install dependency
npm install

# develop
npm run dev

Directory

├
├── configs
├   ├── vite.main.ts                 Main-process config file, for -> src/main
├   ├── vite.preload.ts              Preload-script config file, for -> src/preload
├   ├── vite.renderer.ts             Renderer-script config file, for -> src/renderer
├
├── scripts
├   ├── build.mjs                    Build script, for -> npm run build
├   ├── electron-builder.config.mjs
├   ├── watch.mjs                    Develop script, for -> npm run dev
├
├── src
├   ├── main                         Main-process source code
├   ├── preload                      Preload-script source code
├   ├── renderer                     Renderer-process source code
├

dist and src

• Once npm run dev or npm run build is executed. Will be generated dist, it is the same as the src structure.

• This ensures the accuracy of path calculation.

├── dist
|   ├── main
|   ├── preload
|   ├── renderer
├── src
|   ├── main
|   ├── preload
|   ├── renderer
|

How to work

• The Main-process, Renderer-process and Preload-script are all config in configs/xxx.ts.

• All files are built using Vite, is supper fast.

• scripts/build.mjs only calls the Vite API and uses the configs/xxx.ts config file to build.

• The difference between scripts/watch.mjs and build.mjs is that the watch option is configured for the Main-process and Preload-script. The Renderer-process uses require ('vite').createServer

• Manage projects more through configuration other than scripts. -- 🥳 Simple and clear

Demo

Wechat group | | 请我喝杯下午茶 🥳