Python on Electron framework

Question

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.

Answer 1

This is an update to the answer by @bluesummers that works for me on Jan 2, 2020.

1. Install Node (https://nodejs.org/en/download/) and python 3.

2. Install dependencies:

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

3. Create a directory for your project and create the following files in that directory:

main.js

const electron = require( "electron" );
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
electron.crashReporter.start( { companyName: "my company", submitURL: "https://mycompany.com" } );

var mainWindow = null;

app.on(
    "window-all-closed",
    function()
    {
        // if ( process.platform != "darwin" )
        {
            app.quit();
        }
    }
);

app.on(
    "ready",
    function()
    {
        var subpy = require( "child_process" ).spawn( "python", [ "./hello.py" ] );
        // var subpy = require( "child_process" ).spawn( "./dist/hello.exe" );
        var rp = 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()
        {
            rp( mainAddr )
            .then(
                function( htmlString )
                {
                    console.log( "server started!" );
                    OpenWindow();
                }
            )
            .catch(
                function( err )
                {
                    console.log( "waiting for the server start..." );
                    // without tail call optimization this is a potential stack overflow
                    StartUp();
                }
            );
        };

        // fire!
        StartUp();
});

package.json

{
    "name": "your-app",
    "version": "0.1.0",
    "main": "main.js",
    "scripts":
    {
        "start": "electron ."
    },
    "dependencies":
    {
        "electron": "*",
        "request": "^2.88.0",
        "request-promise": "^4.2.5"
    }
}

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 a Python backend."

if __name__ == "__main__":
    print( "oh hello" )
    #time.sleep(5)
    app.run( host = "127.0.0.1", port = 5000 )

4. From within the project directory, run:

    npm start