Obsługa aplikacji create-react z Flask

Question

Obsługa aplikacji create-react z Flask

Mam back-end flask z trasami API, do których dostęp ma React single page application, utworzona przy użyciu create-react-app boilerplate. Podczas korzystania z wbudowanego serwera deweloperskiego create-react-app, back end mojej Flask działa, nie ma z tym problemu.

Teraz chciałbym obsługiwać zbudowaną (używając npm run build) statyczną aplikację reactową z mojego serwera Flask. Budowanie aplikacji reactowej prowadzi do następującej struktury katalogów:

- build
  - static
    - css
        - style.[crypto].css
        - style.[crypto].css.map
    - js
        - main.[crypto].js
        - main.[crypto].js.map
  - index.html
  - service-worker.js
  - [more meta files]

Przez [crypto], mam na myśli losowo generowane ciągi generowane w czasie budowy.

Po otrzymaniu pliku index.html przeglądarka wysyła następujące żądania:

- GET /static/css/main.[crypto].css
- GET /static/css/main.[crypto].css
- GET /service-worker.js

Moje pytanie brzmi zatem: jak mam obsługiwać te pliki ? Wymyśliłem to:

from flask import Blueprint, send_from_directory

static = Blueprint('static', __name__)

@static.route('/')
def serve_static_index():
    return send_from_directory('../client/build/', 'index.html')

@static.route('/static/<path:path>') # serve whatever the client requested in the static folder
def serve_static(path):
    return send_from_directory('../client/build/static/', path)

@static.route('/service-worker.js')
def serve_worker():
    return send_from_directory('../client/build/', 'service-worker.js')

W ten sposób zasoby statyczne są z powodzeniem obsługiwane. Nie jest to jednak zbyt eleganckie rozwiązanie.

Z drugiej strony, mógłbym włączyć to z wbudowanymi narzędziami statycznymi kolby. Ale nie rozumiem, jak to skonfigurować.

Naprawdę. Nie wiem, jak sobie z tym poradzić, do tego stopnia, że to sprawia, że ponownie rozważę moje użycie create-react-app, ponieważ zmusza mnie do struktury folderu statycznego w bardzo specyficzny i niewygodny sposób: nie ma sposobu, aby zmienić sposób, w jaki aplikacja żąda statycznej zawartości z serwera.

Ogólnie: czy moje rozwiązanie jest wystarczająco wytrzymałe ? Czy istnieje sposób na wykorzystanie wbudowanych funkcji flask do obsługi tych zasobów ? Czy istnieje lepszy sposób korzystania z create-react-app ? Każdy wkład jest doceniany. Mogę zapewnić więcej informacje w razie potrzeby.

Dzięki za przeczytanie !

23

python python-3.x reactjs flask create-react-app

Author: Theo, 2017-05-26

Source

1 answers

score 26 · Accepted Answer

import os
from flask import Flask, send_from_directory

app = Flask(__name__, static_folder='react_app/build')

# Serve React App
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def serve(path):
    if path != "" and os.path.exists("react_app/build/" + path):
        return send_from_directory('react_app/build', path)
    else:
        return send_from_directory('react_app/build', 'index.html')


if __name__ == '__main__':
    app.run(use_reloader=True, port=5000, threaded=True)

To z tym skończyłem. Tak więc zasadniczo Złap wszystkie trasy, sprawdź, czy ścieżka jest plikiem = > Wyślij plik = > else wyślij indeks.html. W ten sposób możesz przeładować aplikację react z dowolnej trasy i nie pęknie.