-
-
Notifications
You must be signed in to change notification settings - Fork 581
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Using Electron as front end #57
Comments
Thanks for this work - I'll check it out. My recent software product is now complete. It definately needed menus, a standalone build of chrome and other electron features so I had no choice but to jump ship and use https://github.com/fyears/electron-python-example. But I'll re-check out the feasibility of eel with electron for my next project. |
@ChrisKnott So I went ahead and created my own electron app (without eel). Then, I put gui.py in that folder:
Here is my main.js:
The Electron app works fine when I run it via
This is my file structure within the gui folder:
Any ideas? |
|
@ChrisKnott OK so I found the electron exe file. Now my gui.py file looks like this:
When I run this, it opens an electron browser but it is just blank. When I go to localhost:8000 on my browser, I can see my page but there is no CSS being applied to it... What am I missing here? EDIT: When I view source on localhost:8000/index.html and click on the link to my css file (../css/global.css), I get a 404 error. Why is this not showing up? EDIT2: Changed |
Also, closing the app doesn't end the python script. |
Fixed. I put the html, css, js and images folders in a folder called web, then I did Works great now except for the issue with the python script still running. |
To close the Python script just call into it from Electron (in the close handler) then call sys.exit() on the Python side |
@ChrisKnott I'll test that in a bit bit right now I'm having another problem. I added a custom title bar and close/minimise buttons which works absolutely fine when I run it via What's going on here? |
Hmmm not sure really, perhaps you have two copies of the file? |
@ChrisKnott I tried it a few hours after and it just worked... Strange. Also I got the closing to work properly, thanks. I even made a custom title bar in electron which looks great. |
It seems like the issue was caused by electron's caching which can be cleared by going to C:\Users<user>\AppData\Roaming<project>\Cache and deleting the files. |
@ChrisKnott Just wanted to say thanks for adding this capability. It's working really well for me! |
Thanks Neal I appreciate it |
@ChrisKnott Hi Chris, thanks so much for this. 1 question - I'm trying to the above suggestion with Electron, however whenever I run my .py script, instead of launching a new window in Electron, it just adds a new tab to my chrome browser. Otherwise, it just opens a new instance of Chrome. Seems like it's ignoring the fact that I want to launch it using Electron and uses Chrome instead. |
@nba94 If it's opening a Chrome tab, then eel must be opening a new instance of Chrome instead of Electron. Do you have |
@ChrisKnott I do. I have the following as options:
and this at the end: Yet it still launches Chrome for some reason. |
Maybe you are still running the old version of eel...? |
@ChrisKnott Yes.. Now it recognizes it! Thanks and sorry... |
@ChrisKnott Thanks for your help so far - this is an amazing addition to the module. I have a question.. When I tried to compile the application using pyinstaller, what is the correct way to include Electron? Do you include it in datas as a complete .app executable file to be stored within the .app itself? I have tried doing that, but that did not work. Maybe there is something that I am missing out? FYI I am on MacOS. |
I think the best way is to use These will be extracted to a temp folder when the .app is run. You want to use the path of that temp folder in your |
@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:
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:
Even options has to be rewritten using the function in order for --onefile compilation to work correctly, as follows:
Sorry for the lengthy post, but maybe this will help someone spend way less time than I have on this! |
@nba94 Thanks for the detailed writeup, I'm sure this will help lots of people |
anyone can help on how to add eel.js while using electron ? |
You now longer have to use You may also want to use; import eel.browsers
eel.browsers.set_path('electron', 'node_modules/electron/dist/electron') to force using binary from local folder (this should also help with packaging with pyinstaller). I have added an example for a minimal electron app. I will improve it when beta is released fully on PyPI. For now I am going to close this issue as there are too many open atm. |
Close handler is not in render process ,how to call into python script ? I'm confused |
Yes I think it is not as easy as it seems, I will make an example with clean shutdown when I have time, hopefully in w/c 12th August as I have time off work then |
Any updates to this? |
Hi @w6tsang - I've taken over primary maintenance of this project for now, and unfortunately I'm not super familiar with this side of the project. I'll try to look into it when I have time - but in the mean time if anyone else comes across this and has more experience and the willingness to share ways that might work, it would be really appreciated. |
I have a project using Electron + Eel 1.0 so I will probably submit fix for this at some point |
Any Updates on Electron + Eel ? |
Hello @nba94. Did you mean something like this? Or like this? |
I was facing the same issue. I found in the examples folder an example for electron + eel that helped me to fix it, my problem was using the HTML file in the main.js file. but eel creates the eel.js in localhost:PORT/eel.js or something like that. but not in the www folder. also, I found out that using URL ends the python script after closing the electron app. No idea why. My way to use electron with eel.
for me I found an error in the electron.py file in the eel in line 18. |
Were you able to package that electron app. |
actually no, I had tried to pack it but it didn't work, but also I didn't try again because I was going to use it in a developing env. so it was ok for me |
Hello, could someone help me build an .exe program with eel using electron on windows? |
I am still not getting how to use eel with electron please help |
I also want to do this |
I've managed to create a single exe for windows. Sadly, had to modify run() function of electron.py to make it work with Disclaimer Modifying the example
def run(path, options, start_urls):
cmd = [path] + options['cmdline_args']
cmd += ['.', ';'.join(start_urls)]
#sps.Popen(cmd, stdout=sys.stdout, stderr=sys.stderr, stdin=sps.PIPE)
sps.Popen(cmd, stdout=sps.PIPE, stderr=sps.PIPE, stdin=sps.PIPE)
import eel
import os
import sys
# Set web files folder
eel.init('web')
@eel.expose # Expose this function to Javascript
def say_hello_py(x):
print('Hello from %s' % x)
def resource_path(rel_path):
""" Get absolute path to resource, works for dev and for PyInstaller """
try:
base_path = sys._MEIPASS
except Exception:
base_path = os.path.abspath(".")
return os.path.join(base_path, rel_path)
eel.browsers.set_path('electron', resource_path('electron\electron.exe'))
say_hello_py('Python World!')
eel.say_hello_js('Python World!') # Call a Javascript function
eel.start("index.html", mode="electron")
|
@amiotk that's great! After long hiatus due to life stuff I am looking to push some improvements to Eel and I will definitely be improving the packaging which is not great at the moment. |
Yeah if you can also do some improvement to work also with cx_freeze because you already now that pyinstaller is detected like a virus |
EDIT for the post above: I've realized that when I try to run electron using python eel in the terminal, it starts the electron located in the opt/homebrew/.... How can I specify python to use the electron located in my project folder? |
Thanks for this. I've noticed that changing the stdout to PIPE couldn't let me do any console.logs() in main.js (electron app). I had some console logs on states like browser-window-blur or focus (for shortcut registering), and the app would just close with no errors (i have an event listener that closes the app on uncaught exceptions). I changed stderr back to sys.stderr to view the error and its a broken PIPE (EPIPE: pipe broken, write). If I remove all my console logs on electron side, the exception didn't rise anymore. Thought I would share this for anyone potentially having the same issue and please let us know if you know a solution for this. Thanks. |
Hii i think i have the solution for running eel in electron app. Kindly check this repository there will be a example app included with description. Thank you |
Was anyone able to figure out this obstacle?
I am also having a similar issue. My css file is being loaded by Electron, but the styles are not being applied. It's not due to the syntax itself or anything, because the page loads fine with the appropriate styling if you just load it in the browser. Very strange situation... |
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 inargs
. 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...and a
main.js
that looks something like...Then, in your python script, you need to specify options something like...
The text was updated successfully, but these errors were encountered: