Posted on Feb 21, 2024 • Edited on Mar 22, 2024

Common Lisp GUI with Electron · quick how to

Yes, it is possible to bundle a Common Lisp web app into Electron, with any web server, so Hunchentoot is possible.

I have a working POC but was planning to write a detailed blog post with more details and a demo sorted out, so stay tuned ;)

Our method starts the Electron process, starts the Lisp web app as a subprocess on localhost on the given port, and opens this address inside the Electron window.

In a nutshell:

follow Electron installation instructions,
build a Lisp web app as a binary
- see https://lisp-journey.gitlab.io/blog/lisp-for-the-web-build-standalone-binaries-foreign-libraries-templates-static-assets/ (the process will be a tad simpler without Djula templates)
bundle this binary into the final Electron build.
and that's it.

I mean, you can run the Lisp web app from sources, but then ship all sources.

You can have a look at https://github.com/mikelevins/electron-lisp-boilerplate for this, their main.js has the pattern, using child_process.

What about Ceramic?

You can ignore the Ceramic project, unfortunately, it's a wrapper around Electron (npm) tools and is broken and outdated. It will try to install an old Electron version and fail. That being said, the Ceramic org has a few useful helper projects we can use.

Example main.js

This file is adapted from the main.js you get after installation, to run an application as a subprocess.

console.log(`Hello from Electron 👋`) const { app, BrowserWindow } = require('electron') const { spawn } = require('child_process'); // Suppose we have our app binary at the current directory. var binaryPaths = [ "./openbookstore", ]; // Define any arg required for the binary. var binaryArgs = ["--web"]; const binaryapp = null; const runLocalApp = () => { "Run our binary app locally." console.log("running our app locally…"); const binaryapp = spawn(binaryPaths[0], binaryArgs); return binaryapp; } // Start an Electron window. const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, }) // Open localhost on the app's port. // We should read the port from an environment variable or a config file. win.loadURL('http://localhost:4242/') } // Run our app. let child = runLocalApp(); // We want to see stdout and stderr of the child process // (to see our Lisp app output). child.stdout.on('data', (data) => { console.log(`stdout:\n${data}`); }); child.stderr.on('data', (data) => { console.error(`stderr: ${data}`); }); child.on('error', (error) => { console.error(`error: ${error.message}`); }); // Handle Electron close events. child.on('close', (code) => { console.log(`openbookstore process exited with code ${code}`); }); // Open it in Electron. app.whenReady().then(() => { createWindow(); // Open a window if none are open (macOS) if (process.platform == 'darwin') { app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) } }) // On Linux and Windows, quit the app main all windows are closed. app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } })