Electron + vite + vue 3

Directory Structure

├─ node_modules/
├─ scripts/               # Custom scripts, we will create one for the dev-server with Electron later.
│  ├─ devSever.ts         # Execute development evnviroment for electron
├─ dist/                  # Contain compiled output from each package.
│  ├─ renderer/           # Compiled output of renderer process.
│  ├─ main/               # Compiled output of main process.
│  ├─ preload/            # Compiled output of preload process.
│
├─ packages/
│  ├─ renderer/           # Contains renderer process source-code.
│  │  ├─ src/
│  │  ├─ vite.config.ts   # Vite config for renderer source-code
│  │  ├─ tsconfig.json    # Specific TypeScript config.
│  ├─ main/               # Contains main process source-code.
│  │  ├─ src/
│  │  ├─ vite.config.ts   # Vite config for main source-code.
│  │  ├─ tsconfig.json    # Specific TypeScript config.
│  ├─ preload/            # Contains preload script source-code.
│  │  ├─ src/
│  │  ├─ vite.config.ts   # Vite config for preload source-code.
│  │  ├─ tsconfig.json    # Specific TypeScript config.
│
├─ package.json
├─ index.html             # Vite entry point for renderer.
├─ tsconfig.node.json     # Root file TypeScript config generated by Vite CLI.

Refs

Electron

• https://github.com/cawa-93/vite-electron-builder
• https://blog.totominc.io/blog/electron-with-typescript-and-vite-as-a-build-system
• https://github.com/twstyled/electron-vite-react/blob/main/scripts/run-electron.ts