[メモ] electron-flask

概要

• https://github.com/matbloch/electron-flask を使う。
  • readme.mdの説明に書かれてる通り

環境

• Windows 10 64bit 21H1 (仮想機にて確認. 2021/6/21現在)
  • Python v3.9.5 (venv使用)
  • Node,js (LTS) v14.17.1
  • 作業フォルダ: C:\develop\

手順

インストール関連

1. PowerShellを管理者で起動。Win+x a Alt+y

2. インストール: Chocolatey (パッケージマネージャ)

   管理者

   Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
   

3. インストール: python nodejs git vscode

   管理者

   cinst -y vscode git python3 nodejs-lts ; exit
   

4. インストール: VSCodeの拡張機能 (お好みで)

   • PowerShellをユーザで起動(Win+x i)して、以下、こぴぺ

     ユーザ

     code --install-extension GitHub.github-vscode-theme
     code --install-extension vscode-icons-team.vscode-icons
     code --install-extension CoenraadS.bracket-pair-colorizer-2
     code --install-extension oderwat.indent-rainbow
     #
     code --install-extension ms-python.python
     code --install-extension ecmel.vscode-html-css
     

5. ssh serverのインストール(デバッグ用)

   • https://docs.microsoft.com/ja-jp/windows-server/administration/openssh/openssh_install_firstuse

     管理者

     # Install the OpenSSH Server
     Add-WindowsCapability -Online -Name OpenSSH.Server~~~~0.0.1.0
     #
     # Start the sshd service
     Start-Service sshd
     # OPTIONAL but recommended:
     Set-Service -Name sshd -StartupType 'Automatic'
     

Electron-Flask

• git-clone～実行前まで。

   mkdir C:\develop
   cd C:\develop
   git clone https://github.com/matbloch/electron-flask
   cd electron-flask
   # venv
   python -m venv venv
   .\venv\Scripts\Activate.ps1
   #
   python -m pip install -r requirements.txt
   npm install
  

• 実行

   # 実行:Electronにて
   cd C:\develop\electron-flask
   .\venv\Scripts\Activate.ps1
   .\node_modules\.bin\electron .
   #
   # 実行: PythonのFlask
   # Webブラウザで、http://localhost:4040/ にアクセス
   python web_app/run_app.py
  

• パッケージ作成
  git-bash をひらいて、以下実行。distフォルダにSetupファイルができてる。

   # パッケージ作成
   cd /c/develop/electron-flask
   source ./venv/Scripts/activate
   #
   npm run package
  

その他

• デスクトップアプリを作るとき、マルチプラットフォーム(Win/Linux)、Python使う、ってので調べてた時に見つけた
• アプリを立ち上げたまま、ブラウザで、http://localhost:4040/にアクセスすると、つながる。