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
Create-React-App #30
Comments
How about something like this to reload that app: https://github.com/AoiKuiyuyou/AoikLiveReload I have not tried it... but I plan to. |
@AnthoniG this is something I want to get working, but I don't have time until next month. If you get it working in the meantime I please post here |
I played around with this for just a few minutes. I did it using VueJS instead, but the concept should be the same. It is not yet an elegant solution, but it works without making any modifications to Eel. FilesHere is my file structure.
Here is #!/bin/bash
cd web
yarn run dev And, here is import eel
import threading
from subprocess import call
from time import sleep
def start_web():
call(['./start.sh'])
def start_eel():
sleep(4)
eel.init('web')
eel.start('', options={
'port': 8080,
'host': 'localhost',
})
if __name__ == '__main__':
t1 = threading.Thread(target=start_web)
t2 = threading.Thread(target=start_eel)
t1.start()
t2.start() PlanAs you can see, the idea is simple: start both the eel webserver, and whatever other webserver you want. Then, tell the eel browser to open your other webbrowser instead of a static file. PitfallsI hacked this together in just a few minutes as a proof of concept. Clearly we can improve upon this, and looks like something that we could and should be able to bake into eel itself. As you can see, I needed to throw a Maybe also there is a better solution to using This may not be the best solution, but it does work. I was able to startup the servers, and make changes to my Vue app and have it live reload inside of the eel browser. Kudos to @ChrisKnott for an awesomely simple and elegant implementation. |
I have been playing around with this, and I think I have an idea on how to set this up with an API sort of like this: eel.init('web')
eel.start(
{
'port': 8888,
'host': 'localhost',
‘path’: ‘’
},
services=[
{
‘dir’: ‘some/working/path’,
‘exec’: ‘my_executable_command.sh’
}
]
) The thought would be to block the The second change would be to make the first parameter in @ChrisKnott If you agree with this approach, I’d be happy to put together a PR for you. Am I on the right track? |
I created a PR #33. This allows users to set any arbitrary location inside The effect of this would be to serve (for example) an application running from HOWEVER, this does not cover the second half of launching services. I am hoping to get some feedback on @ChrisKnott about my strategy if it is a worthwhile endeavor or not. This could (as shown above) be something entirely handled by Of course, in the react or vue instance, this would be in development only. When packaged up, this would be bundled into static files that COULD be served by |
Here is an example of how this is running using |
@ahopkins Loving the idea and going to play around with your git BTW: How did you get it to not complain about Also, what do you do for a build? Have seperate app.py or conditional checks to see if in production etc ? |
The page = {
'port': 8080,
}
eel.start(page, options={
'port': 8888,
}) Right now, I am just launching webpack in a separate terminal session waiting to head back from @ChrisKnott. I think the best route would be to create a
I have not tested it out yet. But, conceptually, there would be at least a different operation to run. Once there is a build of the Javascript app, that could be handled statically by
Perhaps. Or, rather than building the conditionals into it, just replace the script with a build version. I suppose it depends how much abstraction gets introduced. |
@ahopkins Thanks for that. I won't be able to fully test it until this weekend. My idea then is to use your code as a base and re-factor it for my Create-React-App version of it. Before this, I was thinking of going the way of using React in the browser and compile in-memory like JSBin / JSFiddle et al. do |
Awesome. Can you post your code here? Curious to see how your solution may differ |
@ahopkins Yep can do, although it won't change much. Will just use Create-React-App itself rather than VueJS. The other method of having it compile in-memory I never got around to testing, but was going to be doing it all over the weekend. |
Here's my code. Like I said it's based on your VueJS code 😺 Need to play around with it and work how to do a build / deploy scenario but other than that it works. Guess just need main Eel distro to be altered with your pull request. Also included a requirements.txt BUT it's listing Eel as the one from Pypi. However I did a pip install git+ from @ahopkins REPO 😄 |
I've hit a problem on the Python call to Javascript side of things. It keeps throwing an AttributeError and crashes (I wrapped it in a try..except to prevent that, but it still happens) I will amend my repo with the code I have and hopefully some one can figure it out. @ahopkins Your code works fine (I only put the JavaScript function in index.html, did not try it further down the pipeline because I don't understand Vue that much) |
I was planning to try and get |
@ahopkins Code updated. Files changed :- Files Added :- [Will work on a proper .d.ts file later, once I've got everything working lol] |
@AnthoniG I figured out the problem. Actually, there were a couple.
allowed_extensions = '.js .html .txt .htm .xhtml .tsx'.split()
I think this sort of underscores a potential flaw in the setup of I would rather see |
@ahopkins Do I need to re-pull Eel from your git then in order to make this work ? Also agree on the once built part all of this work around and hiccups go away. However during building it's a pain. I have been looking around for alternatives and exploring them. Github link to |
You would need to stash a local copy of the
Then, install that.
Go into |
@ahopkins I am not familiar with React at all (my background is in games dev and C++ mainly!) do you mind if I add you as a collaborator to the project, then I can stand back and let you integrate the React things? I honestly wouldn't even know how to go about testing it! |
Awesome. I would love very to help out. Not sure I'd call myself a React guru, although my main background is as a full stack web developer. I am happy to help and provide my input. |
@ahopkins Not sure if anyone is still working on this issue. If so, maybe it would be nice to open it as a separate branch so everyone can check the latest progress and potentially contribute. I do agree that |
Yes, I am working on it. I have not committed code because it still needs some more tests and (quite honestly) the last couple weeks were simply too busy for me. Hopefully I will have a chance to push soon. |
Does anyone know how to get this working with Create-React-App ?
I've been struggling all day and I am still nowhere forward :(
It works if I build the
CRA
itself BUT I have to keep doing this every time I change something. Create-REact-App comes with it's own Dev server that hot reloads and I wanted to be able to plug into it but when I do aconsole.log(eel)
it always prints undefined.The text was updated successfully, but these errors were encountered: