Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Python on Electron framework

I am trying to write a cross-platform desktop app using web technologies (HTML5, CSS, and JS). I took a look at some frameworks and decided to use the Electron framework.

I've already done the app in Python, so I want to know if is possible to write cross-platform desktop applications using Python on the Electron framework?

like image 946
A Junior Avatar asked Aug 22 '15 17:08

A Junior


People also ask

Can you use Python with Electron?

You can use python-shell to communicate between Python and Node. js/Electron. python-shell provides an easy way to run Python scripts from Node. js with basic and efficient inter-process communication and better error handling.

Is Electron good for GUI?

Electron introduced a new way to develop cross-platform desktop applications with one codebase and web technologies (HTML, JavaScript, and CSS). Developers could build highly flexible and user friendly GUIs with their favorite frontend frameworks. Also, they could make custom GUI controls easily with HTML and CSS.


1 Answers

It is possible to work with Electron but if you are looking for "webbish" UI capabilities, you can check Flexx - it allows you to code in pure Python but still use the styling and UI flexibility of web development tools.

If you insist on going on Electron you should follow the idea of this post.

First make sure you have everything installed:

pip install Flask npm install electron-prebuilt - npm install request-promise -g 

Now create the directory where you want all the magic to happen and include following files

Create your hello.py:

from __future__ import print_function import time from flask import Flask  app = Flask(__name__)  @app.route("/") def hello():     return "Hello World! This is powered by Python backend."  if __name__ == "__main__":    print('oh hello')     #time.sleep(5)     app.run(host='127.0.0.1', port=5000) 

Create your basic package.json:

{   "name"    : "your-app",   "version" : "0.1.0",   "main"    : "main.js",   "dependencies": {     "request-promise": "*",     "electron-prebuilt": "*"   } } 

Finally create your main.js:

const electron = require('electron'); const app = electron.app; const BrowserWindow = electron.BrowserWindow; electron.crashReporter.start();  var mainWindow = null;  app.on('window-all-closed', function() {   //if (process.platform != 'darwin') {     app.quit();   //} });  app.on('ready', function() {   // call python?   var subpy = require('child_process').spawn('python', ['./hello.py']);   //var subpy = require('child_process').spawn('./dist/hello.exe');   var rq = require('request-promise');   var mainAddr = 'http://localhost:5000';    var openWindow = function(){     mainWindow = new BrowserWindow({width: 800, height: 600});     // mainWindow.loadURL('file://' + __dirname + '/index.html');     mainWindow.loadURL('http://localhost:5000');     mainWindow.webContents.openDevTools();     mainWindow.on('closed', function() {       mainWindow = null;       subpy.kill('SIGINT');     });   };    var startUp = function(){     rq(mainAddr)       .then(function(htmlString){         console.log('server started!');         openWindow();       })       .catch(function(err){         //console.log('waiting for the server start...');         startUp();       });   };    // fire!   startUp(); }); 

Taken from the post itself - are the following notes

Notice that in main.js, we spawn a child process for a Python application. Then we check whether the server has been up or not using unlimited loop (well, bad practice! we should actually check the time required and break the loop after some seconds). After the server has been up, we build an actual electron window pointing to the new local website index page.

like image 102
bluesummers Avatar answered Sep 22 '22 23:09

bluesummers