Open12
Eel + React環境構築
手羽先目標
- react + eelでストレスなく開発したい
手羽先かなり良さそうなものを見つけた。tsでnodeのバージョンエラーがあったが、
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
"start": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
のようにして対処。
Reactのホットリロードが動作しない問題は、envファイルに
CHOKIDAR_USEPOLLING=true
と記載することで解決。
手羽先とても良さそうなので、これをもとに最新のリポジトリを作り、解説記事を作ろうと思う。
手羽先最新のTS環境を作ってみる
react
node -v
v18.18.0
npx create-react-app --version
5.0.1
npx create-react-app eel-react-ts --template typescript
cd eel-react-ts
code .
npm start
python
pip install eel
pip list
Package Version
---------------- -------
bottle 0.12.25
bottle-websocket 0.2.9
cffi 1.16.0
Eel 0.16.0
future 0.18.3
gevent 23.9.1
gevent-websocket 0.10.1
greenlet 3.0.0
pip 23.2.1
pycparser 2.21
pyparsing 3.1.1
setuptools 65.5.0
whichcraft 0.6.1
zope.event 5.0
zope.interface 6.1
run.py
import platform
import sys
import eel
@eel.expose
def test():
print("hello eel")
def start_eel():
page = {"port": 3000}
eel.init("src", [".tsx", ".ts", ".jsx", ".js", ".html"])
eel_kwargs = dict(
host="localhost",
port=8080,
size=(1280, 800),
)
try:
eel.start(page, app=None, **eel_kwargs)
except EnvironmentError:
# chromeが見つからないときはwin10以降のedgeを呼び出す
if sys.platform in ["win32", "win64"] and int(platform.release()) >= 10:
eel.start(page, mode="edge", **eel_kwargs)
else:
raise
if __name__ == "__main__":
start_eel()
実行
npm start //react起動
python run.py
手羽先developとbuildで起動できるようにする
run.py
import platform
import sys
import eel
@eel.expose
def test():
print("hello eel")
def start_eel(develop):
if develop:
directory = "src"
page = {"port": 3000}
else:
directory = "build"
page = "index.html"
eel.init(directory, [".tsx", ".ts", ".jsx", ".js", ".html"])
eel_kwargs = dict(
host="localhost",
port=8080,
size=(1280, 800),
)
try:
eel.start(page, app=None, **eel_kwargs)
except EnvironmentError:
# chromeが見つからないときはwin10以降のedgeを呼び出す
if sys.platform in ["win32", "win64"] and int(platform.release()) >= 10:
eel.start(page, mode="edge", **eel_kwargs)
else:
raise
if __name__ == '__main__':
import sys
start_eel(develop=len(sys.argv) == 2)
npm run build
python run.py true //開発モード
python run.py //build実行
Reactからeel関数を呼びだす
public/index.html
<script type="text/javascript" src="http://localhost:8080/eel.js"></script>
<title>React App</title>
src/App.tsx
import React from "react";
import logo from "./logo.svg";
import "./App.css";
export const eel = (window as any).eel;
eel.set_host("ws://localhost:8080");
function test() {
eel.test();
}
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<button onClick={test}>python関数を実行</button>
</header>
</div>
);
}
export default App;
実行してみる
python run.py true
hello eel
hello eel
hello eel
hello eel
hello eel
hello eel
配布できるようにする
pip install PyInstaller
$ pip list
Package Version
------------------------- --------
altgraph 0.17.4
bottle 0.12.25
bottle-websocket 0.2.9
cffi 1.16.0
Eel 0.16.0
future 0.18.3
gevent 23.9.1
gevent-websocket 0.10.1
greenlet 3.0.0
packaging 23.2
pefile 2023.2.7
pip 23.2.1
pycparser 2.21
pyinstaller 6.0.0
pyinstaller-hooks-contrib 2023.9
pyparsing 3.1.1
pywin32-ctypes 0.2.2
setuptools 65.5.0
whichcraft 0.6.1
zope.event 5.0
zope.interface 6.1
(venv)
python -m eel run.py build --onefile
dist配下にexeができる。それを実行するとeelアプリが立ち上がる！
