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

# このリポジトリについて

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

[https://github.com/dende-h/sample_eel](https://github.com/dende-h/sample_eel)

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

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

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

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

[https://github.com/python-eel/Eel](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](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](https://www.python.jp/install/windows/virtualenv.html)

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

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

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