vite-electron-boilerplate

English | 简体中文

Run Setup

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

# enter the project directory
cd vite-electron-boilerplate

# install dependency(Recommend use yarn)
yarn

# develop
yarn dev

Branchs

• main - Electron + Vite + React

• vue-ts - Electron + Vite + Vue3

Directory

├
├── configs
├   ├── vite.main.ts                 Main-process config file, for -> src/main
├   ├── vite.preload.ts              Preload-script config file, for -> src/preload
├   ├── vite.react-ts.ts             Renderer-script config file, for -> src/react-ts
├
├── 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
├   ├── react-ts                     Renderer-process source code
├

How to work

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

• The full-scale Vite compilation 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

• The whole project tends to be configured rather than a large number of scripts, which is dazzling -- 🥳 上手简单

Demo

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