Create-React-App

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 a console.log(eel) it always prints undefined.

[ahopkins]

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.

Files

Here is my file structure.

.project
├── app.py
├── start.sh
└── web
    ├── build
    ├── config
    ├── index.html
    ├── node_modules
    ├── package.json
    ├── README.md
    ├── src
    ├── static
    └── yarn.lock

Here is start.sh:

#!/bin/bash

cd web
yarn run dev

And, here is app.py

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()

Plan

As 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.

Pitfalls

I 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 sleep in there just to make sure the webpack server was up and running first. This needs to be fixed.

Maybe also there is a better solution to using Threading

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.

[ahopkins]

You would need to stash a local copy of the eel repo, and make the change. I have not committed it.

git clone https://github.com/ahopkins/Eel.git

Then, install that.

pip install -e /path/to/Eel

Go into Eel/eel/__init__.py and add .tsx into allowed_extensions as shown above. That will get it working for now until there is a solution. Your alternative would be to define all of your eel methods in a file with a .js extension.