Packaging a Python script with Quasar Framework's Electron Mode involves integrating the Quasar Framework (a Vue.js-based frontend framework) with Electron to bundle the Python script as part of the Electron build. Here's how you can achieve it:
- Write your Python script and ensure it functions as expected.
- If your Python script has dependencies, create a virtual environment:
python -m venv venv source venv/bin/activate # On Windows: venv\Scripts\activate pip install -r requirements.txt
- Use
PyInstaller
to convert the Python script into an executable:This will create a standalone executable (e.g.,pip install pyinstaller pyinstaller --onefile your_script.py
your_script.exe
on Windows) in thedist
folder.
-
Install the Quasar CLI:
npm install -g @quasar/cli
-
Create a new Quasar project:
quasar create my-quasar-electron-app
Follow the prompts to configure your project.
-
Navigate to your project directory:
cd my-quasar-electron-app
-
Add Electron Mode to your project:
quasar mode add electron
-
Place the Python executable (generated by PyInstaller) into a folder within your project, such as
src-electron/python
. -
Modify the Electron main process file (
src-electron/electron-main.js
) to run the Python executable using Node.js'schild_process
module:const { app, BrowserWindow } = require('electron'); const { spawn } = require('child_process'); let mainWindow; app.on('ready', () => { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, // Required for Quasar apps }, }); mainWindow.loadURL('http://localhost:8080'); // This loads the Quasar app // Run the Python executable const pythonProcess = spawn('src-electron/python/your_script.exe'); // Adjust path as needed pythonProcess.stdout.on('data', (data) => { console.log(`Python Output: ${data}`); }); pythonProcess.stderr.on('data', (data) => { console.error(`Python Error: ${data}`); }); pythonProcess.on('close', (code) => { console.log(`Python script exited with code ${code}`); }); });
-
Update the Electron build configuration in
quasar.conf.js
to include the Python executable in the final bundle:electron: { packager: { // Include the Python executable in the build extraResource: ['src-electron/python/your_script.exe'], }, builder: { // For Electron Builder configuration (optional) extraFiles: [ { from: 'src-electron/python', to: 'python', }, ], }, },
-
Build and package the Electron app:
quasar build -m electron
This will produce platform-specific builds (e.g.,
.exe
for Windows,.dmg
for macOS) in thedist/electron
folder.
- Test the packaged app on the target platform to verify the Python script runs correctly when invoked by the Electron main process.
- Ensure proper error handling for the Python executable in the Electron code.
- If the Python script communicates with the frontend, consider using IPC (Inter-Process Communication) between Electron and your Vue.js-based Quasar frontend.
By following these steps, you can successfully package a Python script with Quasar Framework's Electron Mode.
To ensure the Python .exe
file is terminated when the Electron app is closed, you can listen for the app.on('window-all-closed')
and app.on('quit')
events in the Electron main process and kill the Python process accordingly. Here's how you can do it:
const { app, BrowserWindow } = require('electron');
const { spawn } = require('child_process');
let mainWindow;
let pythonProcess;
function createMainWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false, // Required if you're using Quasar or similar frameworks
},
});
mainWindow.loadURL('http://localhost:8080'); // Replace with your app's URL
// Spawn the Python process
pythonProcess = spawn('src-electron/python/your_script.exe'); // Adjust the path to your Python executable
pythonProcess.stdout.on('data', (data) => {
console.log(`Python Output: ${data}`);
});
pythonProcess.stderr.on('data', (data) => {
console.error(`Python Error: ${data}`);
});
pythonProcess.on('close', (code) => {
console.log(`Python script exited with code ${code}`);
});
// Handle window close
mainWindow.on('closed', () => {
mainWindow = null;
});
}
// Kill the Python process when the app quits
app.on('quit', () => {
if (pythonProcess) {
pythonProcess.kill(); // Kill the Python process
}
});
app.on('window-all-closed', () => {
// On macOS, apps usually stay open unless explicitly quit
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// Re-create a window in the app when the dock icon is clicked (macOS)
if (mainWindow === null) {
createMainWindow();
}
});
// Start the app
app.on('ready', createMainWindow);
-
Spawning the Python Process:
- Use Node.js's
child_process.spawn()
to launch the Python executable. - Store the reference to the process in a variable (
pythonProcess
).
- Use Node.js's
-
Killing the Process:
- Call
pythonProcess.kill()
during theapp.on('quit')
event to ensure the Python process is terminated when the Electron app exits.
- Call
-
Window Close Behavior:
- On macOS, the app typically stays open when all windows are closed. Add logic to explicitly quit the app when appropriate.
-
Error Handling:
- Listen for errors on
pythonProcess.stderr
to catch any issues with the Python executable.
- Listen for errors on
By implementing this, the Python process will be terminated cleanly when the Electron app is closed.