electron-vite-boilerplate

A Electron + Vite boilerplate of the nature of learning.

学习性的 Electron + Vite 样板工程!

• 📦 Out of the box
• 🚚 Include only necessary dependencies

Run Setup

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

# enter the project directory
cd electron-vite-boilerplate

# install dependency
npm install

# develop
npm run dev

Directory

Once dev or build npm-script executed will be generate named dist folder. It has children dir of same as packages folder, the purpose of this design can ensure the correct path calculation.

一旦 dev 或 build 命令执行过后，将会生成与 packages 相同结构 dist 文件夹，这样设计的目的是保障构建后路径计算的正确性。

├── dist                      After build, it's generated according to the "packages" directory
│   ├── main/
│   ├── preload/
│   └── renderer/
│
├── scripts
│   ├── build.mjs             npm run build
│   └── watch.mjs             npm run dev
│
└── packages
    ├── main                  Main-process source code
    │   └── vite.config.ts
    ├── preload               Preload-scripts source code
    │   └── vite.config.ts
    └── renderer              Renderer-process source code
        └── vite.config.ts

FAQ

• dependencies vs devDependencies
• Using C/C++ native addons in Electron-Renderer
• Node.js ESM packages (e.g. execa node-fetch)