開発者用のドキュメントです。 環境構築の方法や各種TIPSを残していきます。
https://github.com/RyoIto-jp/CompanyDataOrganization
ベースにした Python(eel) × React テンプレート https://github.com/hrdtbs/template-create-react-app-eel
python -m venv myvenv
myvenv\Scripts\activate
myvenv\scripts\python.exe -m pip install --upgrade pip-
eel
pip install eel
-
playwright
pip install playwright set PLAYWRIGHT_BROWSERS_PATH=0 playwright install chromium -
driver設定 以下のフォルダからchrome-winフォルダをコピーして、開発Dir直下のdriverフォルダにペースト
%localappdata%\ms-playwright
tips: recording
playwright codegen wikipedia.org playwright codegen lama05:8082/fuel
yarn install
rem reactサーバーの起動を確認
yarn start:js
rem build確認
yarn build:js#rem reactサーバーをバインドして、Eelを起動
#rem 別ターミナルで実行すること
yarn start:js
yarn start:eel
#rem buildしたreactページをEelで起動
python index.py --product# coding: utf-8
import eel.browsers
import eel
import sys
import os
@eel.expose
def hello():
print('hello')
# ChromiumのAPIキー欠落アラートの非表示
def disable_chromium_api_message():
"https://code-examples.net/ja/q/144a85b"
os.environ["GOOGLE_API_KEY"] = 'no'
os.environ["GOOGLE_DEFAULT_CLIENT_ID"] = 'no'
os.environ["GOOGLE_DEFAULT_CLIENT_SECRET "] = 'no'
# develop用起動処理
def react_run():
disable_chromium_api_message()
eel.init("client", ['.tsx', '.ts', '.jsx', '.js', '.html'])
eel.start({"port": 3000}, host="localhost", port=8888, size=(1400, 850), position=(200, 200), close_callback=python_exit)
# 終了時処置
def python_exit(page, sockets):
if not sockets:
sys.exit()
# Eel(GUI)を表示するブラウザをChromiumに設定(Chrome未インストールPC用)
ROOT_DIR = os.path.dirname(sys.argv[0])
chrome_path = os.path.join(ROOT_DIR, 'driver/chrome-win/chrome.exe')
if os.path.exists(chrome_path):
eel.browsers.set_path('chrome', chrome_path)
if __name__ == '__main__':
debug_mode = 1
if len(sys.argv) > 2:
debug_mode = 1 if sys.argv[1] == '--develop' else 0
if debug_mode == 1:
eel.init('client')
react_run()
else:
eel.init('build')
eel.start('index.html')React ./public, ./src, ./build がカレントDirから./webフォルダに変更する。
./ -> web/
https://www.luku.work/create-react-app-rename-src
yarn add -D react-app-rewiredROOTにconfig-overrides.jsを作成
const path = require('path');
module.exports = {
paths: function(paths, env) {
paths.appPublic = path.resolve(__dirname, 'web/public');
paths.appHtml = path.resolve(__dirname, 'web/public/index.html');
paths.appIndexJs = path.resolve(__dirname, 'web/src/index.js');
paths.appSrc = path.resolve(__dirname, 'web/src');
paths.appBuild = path.resolve(__dirname, 'web/build');
return paths;
}
};package.jsonを修正
{
"name": "create-react-app-with-eel",
//...
},
"scripts": {
//...
"start": "react-app-rewired start",
"build": "react-app-rewired build",
//...
},# eelを起動
python gui.py --develop
# react(rewired)を起動
yarn startこの状態でフロントエンド側を開発する。
.envファイルを作って以下を記入
FAST_REFRESH = false
CHOKIDAR_USEPOLLING=truepython -m eel gui.py web/build --onefile --cleaneel, playwright
eel api
browser
chrome ext alart
react環境構築
デバッグモード
build
deploy
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent