This is a repository to showcase a simple electron app with a Node.js backend using DuckDB and React frontend. Using DuckDB shows how to use native modules in an Electron app.
There are several components that go into a Electron app:
- Frontend: A frontend framework, such as React / Vue.js. It is possible to write a Electron app without a frontend framework as well, as an Electron app can be a thin wrapper around a website.
- Backend: Usually using some native Node.js modules. The backend does not need to in Node.js though, it can be in any language.
- webpack: webpack is one of several Javascript/Typescript bundlers that minifies and
'bundles' the frontend component of the Electron app into one file that can be loaded
from the
index.html
file. Webpack configurations can be complex, so it is recommended to start with a template.
The frontend component in Electron is isolated in the browser context and does not have access to native Node.js and no direct filesystem access. Communication between the frontend and backend happen through an IPC layer.
- Ensure
make
works:xcode-select --install
on macOS, orsudo apt install make
on Debian - Install Node.js 21 through package manager or using something like
nvm
. - Run tests:
make test
- Start app:
make start
- Install pre-commit and pre-commit hooks:
pre-commit install
While this repository can be used as a template, here are the steps to recreate from the source electron-forge template using Yarn.
-
First add
create-electron-app
as a global script, this is so that we can use it to bootstrap a new repositoryyarn add global create-electron-app
-
Create electron app template using the webpack typescript template.
yarn create electron-app my-new-app -- --template=webpack-typescript
-
Upgrade to the Yarn 4 and pin the yarn version
corepack enable
This might fail if you do not have write access to the location where
corepack
is installed, in that case, use a directory in your PATH where you have write access:corepack enable --install-directory ~/bin
-
Pin the yarn version:
corepack use 'yarn@4'
-
Yarn install and start
yarn yarn start
-
Commit the
yarn.lock
file to pin dependencies.