Modern web UI x Python FAST API
- Working Python environment (virtual environment is recommended), Python 3
- Know how to use Node.js command
- Python Backend - do as you wish with python, do AI / ML / etc and send those data to modern web UI
- Cross Platform APP using web UI
clone this git
git clone https://github.com/gnoviawan/fast-api-electron-js.git
change directory to cloned git
cd fast-api-electron-js
install all python dependencies
npm run py-install
install all node js dependencies
npm install
engine/
: a python directory for Fast API, create/modify all python module there, keep the api.py
file name if you want to easily building the app later.
public/
: all frontend related files
public/assets/js/python.js
: is responsible to communicate between our frontend and backend.
public/assets/js/main.js
: electron main window
run this command to preview your app
npm run electron-dev
before we building our app we have to build our Python FastAPI to .exe file ( windows ) or other executable format for each OS using PyInstaller and then call our Python Fast api as a child process inside electron js.
run this command to build python using PyInstaller
library
please adjust the api.spec
if you want to modify the build process or icon, please refer to the PyInstaller documentation
npm run py-build
also if you are not using Windows change this code inside public/assets/js/main.js
to another OS executable format ( not tested )
const API_PROD_PATH = path.join(process.resourcesPath, "../lib/api/api.exe")
after we build our fast API it's time to build our main APP, run this command to build it
npm run electron-build
our app are published to this path dist
if you want to change the build options modify this config file electron-builder.config.json
more about the options please check electron-builder documentation
Python Fast API = main package that create our API backend
uvicorn = ASGI Python Server
Axios JS = package to communicate beetwen Python and Frontend
Electron JS = to create standalone application
Tabler = Front end UI Kit / Framework
Electron Builder = packate to build our Electron APP
Electron Reloader = to automatic reload our Electron APP when in development stage
Python Shell = to create Python shell inside Node.js Application, usefull when we in development stage
PyInstaller = build our python to executable format