Using Electron as front end

I mainly use Eel to make prototypes or personal/internal tools, where polish is not that important, but if you want to make a more professional looking app with HTML/JS frontend, and Python backend, you can use Electron as the browser. This will give you total control over things like right click menus, menubars etc.

I have added a new custom mode which just runs whatever command you provide in args. In the future I might add more “first class” support for Electron.

The absolute smallest possible Electron app needs two files, a package.json file that looks like…

{
  "main": "main.js",
  "devDependencies": {
    "electron": "^2.0.0"
  }
}

and a main.js that looks something like…

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow

let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600})
  mainWindow.loadURL('http://localhost:8000/start_page.html');
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  app.quit()
});

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})

Then, in your python script, you need to specify options something like…

options = {
	'mode': 'custom',
	'args': ['/usr/local/bin/electron', '.'],
	(...)
}
eel.init('web')
eel.start('start_page.html', size=(800, 600), options=options)

[nba94]

@ChrisKnott I finally worked it out…

Just in case anyone else will be wondering these are the following steps I took to compile into a single file on MacOS:

1. Download compiled electron from https://github.com/electron/electron/releases (for me it was electron-v2.0.11-darwin-x64.zip)

2. Right click -> open contents of the downloaded Electron, create ‘app’ folder in the Contents -> Resources and move my main.js, index.html and package.json inside.

3. As Chris mentioned above, --add-data has to be used to include Electron, however for some reason it does not include some of the libraries for Electron to run successfully when compiled, so including Electron and those files as follows:

• –add-data [include Electron.app that you have downloaded previously]

• –add-data /Users/[path to downloaded Electron]/Electron.app/Contents/Frameworks/Electron\ Framework.framework/Versions/A:Electron.app/Contents/Frameworks/Electron\ Framework.framework

• (optional) instead of point 2 it is also possible to just write --add-data for those files required to include inside Electron, following this format: –add-data /Users/[path to your main.js]/main.js:Electron.app/Contents/Resources/app

After making sure these files are included everything ran as expected.

FYI In case anyone is planning to compile using --onefile - on MacOS you have to make sure all of the references to any paths in your script are using relative paths. The following function ensures that the path to any file you use in your script that is saved locally is turned into a relative path:

def resource_path(relative_path):
    """ Get absolute path to resource, works for dev and for PyInstaller """
    if hasattr(sys, '_MEIPASS'):
        return os.path.join(sys._MEIPASS, relative_path)
    return os.path.join(os.path.abspath("."), relative_path)

Even options has to be rewritten using the function in order for --onefile compilation to work correctly, as follows:

options1 = {
     'mode': 'custom',
     'port': 8000,
     'args': [resource_path('Electron.app/Contents/MacOS/Electron'),'.'],
 }

Sorry for the lengthy post, but maybe this will help someone spend way less time than I have on this!

[ChrisKnott]

I have a project using Electron + Eel 1.0 so I will probably submit fix for this at some point