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             Develop script -> npm run build
│   └── watch.mjs             Develop script -> npm run dev
│
└── packages
    ├── main                  Main-process source code
    │   └── vite.config.ts
    ├── preload               Preload-script source code
    │   └── vite.config.ts
    └── renderer              Renderer-process source code
        └── vite.config.ts

🚨 dependencies vs devDependencies

• Put Node.js packages in dependencies
• Put Web packages in devDependencies

See more 👉 dependencies vs devDependencies

🚨 Node.js ESM packages

e.g. node-fetch execa got ...

👉 Using Node.js ESM packages in Electron-Renderer