Electron JS x Python Fast API

Modern web UI x Python FAST API

Preview

Prerequisite

Working Python environment (virtual environment is recommended), Python 3
Know how to use Node.js command

Features

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

Installing / Getting started

clone this git

git clone https://github.com/gnoviawan/fast-api-electron-js.git

Initial Configuration

change directory to cloned git

cd fast-api-electron-js

install all python dependencies

python3.9 -m venv venv
source venv/bin/activate
npm run py-install

install all node js dependencies

npm install

Developing

Directory Structure :

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

Preview your Application :

run this command to preview your app

npm run electron-dev

Deploying / Publishing

Building Python :

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');

Build the application :

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

All Reference Links for this project

Server / Backend API ( Python )

Python Fast API = main package that create our API backend

uvicorn = ASGI Python Server

Middleware (Javascript)

Axios JS = package to communicate beetwen Python and Frontend

Frontend ( HTML, CSS, Javascript )

Electron JS = to create standalone application

Tabler = Front end UI Kit / Framework

Utility

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

Usage

Get List of ID in Core Banking using query:

SELECT
c.pp_nm_piece_id
AS "id_number", p.num_complet_cpte
FROM ad_cli c
JOIN ad_cpt p ON c.id_client = p.id_titulaire
WHERE p.id_prod=1;

Get List of from mifotra with following columns.(SHould be one sheet name HSS MAG)

EmployeeId
LastName
FirstName
IdNumber
Amount
EntityName
Unit
PeriodId
Creditor
AccountNumber

victor-abz / hss-mag-file