A starter template for creating a GUI frontend with a JavaScript web framework via Vite for a Python backend via Eel.
While this template uses Vue.js, there's a similar one for Svelte available in another branch.
- Structured as a launchable Python package with some simple process managing to automate the interoperability between Eel and Node.js
- Development mode with Vite's Hot Module Replacement (HMR)
- Bidirectional communication in both development and production modes
- Focused on understanding how this works to keep full control instead of packaging a pretended solution
- Linux Mint 22.1 (based on Ubuntu 24.04)
- Python 3.12.3
- Eel 0.18.1
- Chromium 135.0.7049.95
- Node.js 22.14.0
- Vite 6.3.2
- Vue.js 3.5.13
-
Install Python dependencies:
pip install --requirement=requirements.txt
-
Create the Vite template with Node.js package manager:
cd app npm create vite@latestChoose :
- Project name:
frontend - Framework:
Vue - Variant:
JavaScript
- Project name:
-
In
app/frontend/index.html, add to<head>:<script type="text/javascript" src="/eel.js"></script>
-
Update
app/frontend/vite.config.js:import { defineConfig, loadEnv } from 'vite' import vue from '@vitejs/plugin-vue' // https://vite.dev/config/ export default defineConfig(({ command, mode }) => { const env = loadEnv(mode, './..', ''); return { plugins: [vue()], build: { outDir: env.BUILD_DIR }, ...(command === 'serve' && { // dev mode config server: { host: env.DEV_HOST, port: Number(env.DEV_PORT), proxy: { '/eel': { ws: true, // WebSocket target: { host: env.EEL_HOST, port: env.EEL_PORT } } } } }) }; });
-
In
app/frontend/src/components/HelloWorld.vue, add to<script setup>:const eel = window.eel; const msg_to_python = ref(""); function send_to_js(message) { console.log("Message received from Python: " + message); } window.eel.expose(send_to_js, 'send_to_js'); // ⚠️ must be called via `window.` and must get the name repeated as a string because the production build changes the functions names
-
Add to
<template>:<input type="text" placeholder="Message to Python" v-model="msg_to_python"/> <button @click="eel.send_to_python(msg_to_python)">Send to Python</button>
-
Run from project root:
python -m app prod
-
Test:
- Check the Python to JS message in DevTools (F12).
- Send a message from JS to Python with the user interface and check the console output of Python.
-
Run from project root:
python -m app dev
-
Test communication as in production mode.
-
Modify
<template>content inHelloWorld.vueto test the HMR feature.
-
Memory leak: Eel 0.18.1 has a memory leak for Python exposed function. Apply this fix if needed.
-
Performance: For sustained data streaming, the JSON constrain of Eel may be a bottleneck. Consider using Flask-SocketIO for binary format with a similar ease of use.