Electron for the Desktop

Electron 20,509 (github.com/electron/electron (https://github.com/electron/electron 123,289 ), MIT) runs a web app in a Chromium 4,389 window driven by Node.js 2,131 . The Framework7 CLI 89 generated Electron projects until version 8.0.0 (April 2023), whose changelog reads "removed options to generate Desktop app with Electron", so today you wrap the www/ build yourself. On Windows, package.json with "main": "main.js", the copied www/ folder and this script are enough; it renders offscreen and saves a screenshot, so it doubles as a smoke test:

main.js for BookNest on the desktop, Electron 44.4.5JavaScript

const { app, BrowserWindow } = require('electron');
const path = require('node:path');
const fs = require('node:fs');
app.whenReady().then(async () => {
  const win = new BrowserWindow({
    width: 1024, height: 700, show: false, webPreferences: { offscreen: true },
  });
  await win.loadFile(path.join(__dirname, 'www', 'index.html'));
  await new Promise((done) => setTimeout(done, 3000));
  const info = await win.webContents.executeJavaScript(
    'JSON.stringify({ title: document.title, ready: !!(window.app && app.initialized) })');
  console.log(info);
  fs.writeFileSync('booknest-electron.png', (await win.webContents.capturePage()).toPNG());
  app.quit();
});

Output

{"title":"The Quiet Harbor · BookNest","ready":true}

BookNest in an Electron window 1,024 pixels wide: the master-detail layout of Routable Tabs and Split View with the first book open

At 1,024 pixels the view crossed its 768-pixel master-detail breakpoint, so the first book opened beside the catalog, and the page-title plugin named the window. theme: 'auto' picked Material. For a visible window, drop show: false and offscreen; to ship, package with Electron Forge or electron-builder 14,670 , and follow Electron's security checklist (Electron warned about the template's unsafe-eval Content-Security-Policy).

MENU