Pochade-Electron

◈ 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

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.

SQLite in the Browser

@sqlite.org/sqlite-wasm running in a web worker, with read/write of entries and index generation out of the box.

Local File Storage

OPFS (Origin Private File System) persistence for the database, plus the File System Access API to export/import the database file — both work in Chrome and in 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

Playwright end-to-end tests 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 open http://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 OPFS Persistence

The SQLite database persists in OPFS (Origin Private File System) via sqlite-wasm's "opfs-sahpool" VFS. Unlike the classic OPFS VFS, this needs no cross-origin isolation headers — the generated app persists data out of the box on any static host, in the Electron renderer, and in any modern browser (Chrome, Edge, Firefox, Safari).

If OPFS is ever unavailable, the app still works with a transient in-memory database, and users can export/import it as 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 Playwright e2e tests (first run: `npx playwright install chromium`)
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 ├── 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 │ └── sqlite-worker.js # sqlite-wasm module worker ├── styles/ # CSS files (one per component) ├── tests/ # Playwright 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