In this project, I use electronJS to build a simple desktop calculator app which has a React front-end and Python (FastAPI) back-end. The python back-end (script backend/backend.py
and dependencies in requirements.txt
) is bundled into a standalone executable using PyInstaller. This is a very powerful tool as it allows people who do not have python installed on their machines to use your app!
You can adapt this project to your own needs by modifying backend/backend.py
and frontend/src/App.jsx
and the relevant configuration files. For example, you can use this framework to convert an exisiting web application to a desktop application --- electron/main.js
will spawn the python back-end, make a desktop window, and load frontend/public/index.html
into the desktop window instead of a browser window.
Or...you can just have fun using my "Weasel Calculator" (and don't ask LOL)....
weasel_calculator.mov
root/ |-- backend/ |-- backend.py Python back-end script |-- api.spec Configuration needed for PyInstaller |-- electron/ |-- main.js Entry-point for ElectronJS (makes desktop window) and FastAPI back-end (spawns python process) |-- preload.js |-- resources/ Contains the app logo in .icns format for MacOS (change to .ico for Windows) |-- frontend/ |-- public/ |-- index.html Entry-point for React front-end in dev mode ... Any images (svg) used in the front-end |-- src/ |-- App.jsx React front-end script |-- index.js |-- style.css |-- package.json React dependencies; scripts: start, build |-- webpack.config.js |-- .babelrc |-- requirements.txt Python packages to install (preferrably inside a venv in the root directory) |-- electron-builder.config.json Configuration for electron-builder |-- package.json ElectronJS dependencies; scripts: py-install, py-build, electron-dev, electron-build
-
Make and activate a python
venv
, then install requirements:python -m venv desktop_env source desktop_env/bin/activate pip install -r requirements.txt
-
Make sure app is in development mode by changing
isDev=false
toisDev=true
inelectron/main.js
.
(Only becauseelectron-is-dev
package was not working correctly for me so I resorted to changingisDev
manually.) Additionally, ensurepythonExecutable
inmain.js
is set to the correct location on your computer. -
Start the React front-end from
frontend/
directory:cd frontend npm start
-
Start the Python back-end from
root
directory:cd .. npm run electron-dev
(MacOS only: for windows you will need to make some changes to your configuration first)
-
Build the React front-end:
cd frontend npm run build
Should create folder
frontend/build/
. -
Use PyInstaller to bundle Python back-end (scripts + dependencies) into a standalone executable:
Activate
desktop_env
(I believe, but am not totally certain, that PyInstaller must be called from an environment where all dependencies to be included in the bundle are installed):source desktop_env/bin/activate
Bundle back-end from
root
directory:cd .. npm run py-build
Should create folders
backend/dist/
andbackend/build/
. -
Make sure app is in production mode by changing
isDev=true
toisDev=false
inelectron/main.js
. -
Build the Electron app:
npm run electron-build
Should create folder
dist/
.
To launch app, navigate todist/mac-arm64/calculator-app
, cross your fingers, and click!
-
PyInstaller is tested on MacOS, Windows and Linux, but cannot cross-compile. If you want to make a Windows app, you need to build the app on Windows. Additionally, PyInstaller seems to be quite version-specific: If you test the app on a Mac with an OS older than the one used to build the app, the Python back-end may not work (this was my experience, and upgrading the OS fixed the issue).
-
Currently,
asar: false
is set inelectron-builder.config.js
. To build with asar, you might need to spend some time figuring out how to unpack the scripts you need to call from main.js. -
If you get an error that says something like
ENODIR ... ensureSymlink ... Contents/Versions/Python
(I don't remember the exact wording) when runningnpm run electron-build
, try downgrading your version of electron-builder (some people say downgrading to"electron-builder": ^23.0.0
worked for them).