Project Structure & npm Scripts

Project Structure & npm Scripts

A common layout:

my-app/
├─ src/            # renderer source (HTML/JS/CSS or a framework)
│   ├─ index.html
│   └─ renderer.js
├─ main/           # main‑process code
│   └─ main.js
├─ preload/        # preload scripts (secure bridge)
│   └─ bridge.js
├─ package.json
└─ .gitignore

Add helpful scripts:

"scripts": {
  "start": "electron .",
  "dev": "concurrently \"npm:watch-main\" \"npm:watch-renderer\"",
  "watch-main": "nodemon --watch main --exec electron .",
  "watch-renderer": "vite --config vite.renderer.config.js",
  "build": "electron-builder"
}

concurrently and nodemon are optional helpers that restart the app on changes.