Dual Targets
One codebase: npm run build produces a static web app (dist/), npm run electron runs it as a desktop app, and npm run electron:build packages it with electron-builder.
◈ About
Pochade-Electron is an npx project scaffolder: a lightweight, opinionated starter template for building apps that ship as
both an Electron desktop app and a static, front-end-only web app — with SQLite local persistence and optional
C++/Rust WebAssembly, all in vanilla JavaScript. No framework lock-in. No unnecessary abstractions. Just fast, passionate code.
▣ Features
SQLite in the Main Process
node:sqlite — Node's built-in SQLite module — runs in the Electron main process, persisting to a real SQLite file on disk, with read/write of entries and index generation out of the box.
Local File Storage
The File System Access API exports/imports the database file — works in Chrome, Edge, and Electron's renderer.
Custom HTML Elements
Built-in support for dataroom-js. Create reusable components without Shadow DOM complexity.
WebAssembly, Optional
Choose C++ (Emscripten), Rust (wasm-pack), both, or none at scaffolding time. Prebuilt binaries are included, so it works before you install any toolchain.
Modern Tooling
Webpack 5, SWC, PostCSS with cssnano. Write real CSS — no CSS-in-JS required.
Tests Included
WebdriverIO end-to-end tests run the real Electron app, and Vitest unit tests ship with the template, ready to run.
AI Context
Includes an AGENTS.md describing the project's conventions for AI-assisted development.
▶ Quick Start
- Scaffold a new project:
npx pochade-electron my-project - Answer the interactive prompts (WASM support, title, description, author, license, etc.).
- Enter your project:
cd my-project - Start the dev server:
npm start— then openhttp://localhost:3000 - In a second terminal, launch the desktop app:
npm run electron(it hot-reloads against the dev server)
The scaffolder copies the template, prunes the WASM examples you didn't pick, configures package.json (including the electron-builder appId/productName), fills in your metadata, and installs all dependencies automatically.
◉ A Note on Local Persistence
The SQLite database runs via Node's built-in node:sqlite in the Electron main process and persists to a real SQLite file on disk
(sessionData/app.sqlite3). No cross-origin isolation headers, no browser storage quotas.
In a plain web browser the static build still runs, but database calls reject with a descriptive error pointing at npm run electron.
Either way, the database can be exported to — and imported from — a file via the File System Access API
(showSaveFilePicker / showOpenFilePicker).
❖ Inside the Generated Project
| npm start | Start the web development server |
| npm run build | Build the static web app into dist/ |
| npm run electron | Launch in Electron (dev server if running, else dist/) |
| npm run electron:build | Build and package the desktop app into release/ |
| npm test | Run the WebdriverIO e2e tests in the real Electron app (headless CI: install xvfb) |
| npm run test:unit | Run the Vitest unit tests |
| npm run build:wasm:cpp | Rebuild the C++ wasm example (needs Emscripten) |
| npm run build:wasm:rust | Rebuild the Rust wasm example (needs wasm-pack) |
▦ What You Get
my-project/
├── electron/ # Electron main process
│ ├── main.js
│ └── database.js # node:sqlite database service
├── src/ # JavaScript source files
│ ├── lib/ # Framework-free libraries (database, file storage)
│ ├── wasm/ # Optional C++/Rust WebAssembly
│ ├── db-component.js # SQLite example component
│ └── file-storage-component.js
├── styles/ # CSS files (one per component)
├── tests/ # WebdriverIO e2e + Vitest unit tests
├── scripts/ # Build scripts
├── index.html # Main HTML file
├── index.js # Main JS entry point
├── index.css # Main CSS file
├── webpack.config.js # Build configuration
├── package.json # Project metadata + electron-builder config
└── .env.example # Environment variable template
◊ Philosophy
No framework lock-in, no Shadow DOM, no CSS-in-JS, no complex build chains. Write JavaScript, not framework code.
Same as Pochade-JS