Flask でWebアプリケーションを作成します。
クライアント側は Vite と React を使います。
フォルダー構成
flask-vite-react
┣ app
┃ ┣ dist
┃ ┣ node_modules
┃ ┣ public
┃ ┣ src
┃ ┣ index.html
┃ ┗ package.json
┗ main.py

サーバー側
Flask
モジュール一覧
pip install Flask
main.py
from flask import Flask, render_template, send_from_directory
app = Flask(__name__, template_folder="./app/dist")
@app.route("/", methods=['GET'])
def index():
return render_template('index.html')
@app.route('/<path:filename>', methods=['GET'])
def resource(filename):
return send_from_directory("./app/dist", filename)
@app.route('/assets/<path:filename>', methods=['GET'])
def assets_resource(filename):
return send_from_directory("./app/dist/assets", filename)
if __name__ == "__main__":
app.run(host="0.0.0.0", port=80, debug=True)
React を Vite でまとめると、JSファイルとCSSファイルが assetsフォルダーに出力されるため、assetsフォルダーのファイルを読み込むようにしています。
クライアント側
クライアント側は appフォルダー内に作成していきます。
npm create [email protected]
cd app
npm install
npm run dev

ローカルで動くことを確認してから、ビルドします。
npm run build
> [email protected] build
> tsc && vite build
vite v4.1.1 building for production...
✓ 34 modules transformed.
dist/index.html 0.46 kB
dist/assets/react-35ef61ed.svg 4.13 kB
dist/assets/index-d526a0c5.css 1.42 kB │ gzip: 0.74 kB
dist/assets/index-64bab72d.js 143.55 kB │ gzip: 46.17 kB
appフォルダー内に distフォルダーが作られてその中にビルドされたファイルが出力されます。

動作確認
main.py を実行して 正しく表示されればOK
python main.py
* Serving Flask app 'main'
* Debug mode: on
* Running on all addresses (0.0.0.0)
* Running on http://127.0.0.1:80
* Running on http://192.168.0.9:80
Press CTRL+C to quit
* Restarting with stat
0.01s - Debugger warning: It seems that frozen modules are being used, which may
0.00s - make the debugger miss breakpoints. Please pass -Xfrozen_modules=off
0.00s - to python to disable frozen modules.
0.00s - Note: Debugging will proceed. Set PYDEVD_DISABLE_FILE_VALIDATION=1 to disable this validation.
* Debugger is active!
* Debugger PIN: 134-274-126

