Python＋eelでReactを使ってGUI開発(テンプレ)

このリポジトリについて

PythonデスクトップアプリのGUIをReactで開発するためのライブラリeelを使えるようにするためのテンプレート

https://github.com/dende-h/sample_eel

業務にてデスクトップアプリ開発が検討されており、Web技術でGUI作成ができるライブラリということでいろいろ試してみたものです

Develop起動時のホットリロードも効きそうなので、ちょっとこれを捏ね繰りまわして要件に合うものが作れそうか試してみたいと思います

ここまで来るのに１週間かかりましたが(Pythonの入門なども含めると2週間)、このテンプレートの構成でそれなりに使っていけそうかなと思ったので、ご興味ある方はぜひ試してみてください。Pythonで仮想環境化に作るのでPCの環境も荒れませんよ( ´艸｀)

利用させていただいた元リポジトリ

https://github.com/python-eel/Eel

こちらのexamplesディレクトリの07-CreateReactAppのコードを元にしています

App.tsxなどがクラスコンポーネントだったので関数コンポーネントに変更

また自分用にChakraUIやRecoilが使えるようになっています（この文章を執筆時点でこの環境でそれらが正常に動作するかは確認できておりません。ChakraUIのコンポーネントは使えてるから多分大丈夫なはず）

vsCodeでコード整形できるようにeslintとprettierも設定しています→https://tech-blog-efcg.vercel.app/36bf4512-a7a8-46dd-8025-61e1cba2b33a

環境

Python3 ver9.13

git version 2.37.1.windows.1

npm 8.19.2

node.js v16.18.0

react 17.0.2

※anacondaなどでPythonを入れている場合動作確認しておりません。使えない可能性があります。

How to use

Pythonで仮想環境でプロジェクトを作る

  • projectEnvsなどのディレクトリを任意の場所に作ってそこをカレントディレクトリにし、pythonコマンドで仮想環境を作る
cd C:\Users\［******］\Py_workSpace\projectEnvs

python -m venv [プロジェクト名]
  • 出来上がったプロジェクトフォルダに移動、仮想環境に入ってライブラリをインストール
cd ./[プロジェクトディレクトリ]

.\Scripts\Activate.ps1　　//このコマンドで仮想環境に入れる(Powershellの場合)

.\Scripts\activate.bat    //コマンドプロンプトの場合はbatファイルの方を指定

(sample_eel) PS C:\Users\［*******］\Py_workSpace\projectEnvs\sample_eel>
//表示がこのようになっていれば仮想環境に入れています

pip install bottle bottle-websocket future whichcraft eel pyinstaller
//この辺は詳しくは解説できないです。すいません…

このリポジトリをプロジェクト内にCloneして利用する

  • プロジェクト内に新しくwebディレクトリを作成してその中にClone

    • ディレクトリは空じゃないとエラーが出ます。

cd C:\Users\［*******］\Py_workSpace\projectEnvs\sample_eel>web

git clone [リポジトリURL] .
//既存の空のディレクトリにCloneするため最後は「.」
  • 追跡リポジトリをプロジェクトで使用するものに変更

    • 変更できてるかの確認はgit remote -v

git remote set-url origin [新しいプロジェクトのリポジトリURL]

git pull origin
  • カレントディレクトリにてnpmインストールとビルド

    • ChakraUIやrecoilやらのライブラリを元から使っているので、packagejsonを確認して使用しないものは削除してください

nmp install　//ライブラリのインストール

npm run build　//index.htmlのビルド

git add .

git commit -m "コミットメッセージ"

git push origin main

動作を確認

  • 通常起動
Python .\eel_sample_python.py

Reactのindex.htmlの画面が立ち上がればOK

この場合はビルド後のindex.htmlを読み込んでいます

  • Develop起動

    • Powershellを二つ起動しそれぞれで別のコマンドを打つ

Python .\eel_sample_python.py true   //trueの引数をつけてPythonファイルを起動
npm start

localhost3000で先ほどと同じように起動すれば成功

こちらはPublic下のindex.htmlを読み込んでいるので編集すると画面に反映されます

実行ファイル作成

python -m eel eel_sample_python.py build --onefile --name react-eel-app

react-eel-appはファイル名なので自由に変更してください

distディレクトリが新しく生成されてその直下にexeファイルができています

ダブルクリックするとアプリが起動します

webディレクトリごとデスクトップにコピーして起動しても動作したので、このファイルを渡せばPython環境がないPCでも利用できます

その他の参考にさせていただいた記事＆リポジトリ

Python環境構築ガイド : https://www.python.jp/install/windows/virtualenv.html

[Eel] Python, JavaScript/Reactでデスクトップアプリを作るには : https://deecode.net/?p=1428

hrdtbs/template-create-react-app-eel(GitHub) : https://github.com/hrdtbs/template-create-react-app-eel

まだまだ入門したばかりでわからないことだらけですがいろいろ試してみたいと思います

← Go home
;