oficial - para que sirve python flask

Servir una aplicación crear-reaccionar con Flask

Question

Tengo un back-end de matraz con rutas API a las que se accede mediante una aplicación React de una sola página, creada mediante la plantilla de creación-reaccionar-aplicación. Cuando utilizo el servidor de desarrollo incorporado create-react-app, mi back-end Flask funciona, no hay problema con eso.

Ahora, me gustaría servir la aplicación estática construida (usando npm run build ) de mi servidor Flask. La construcción de la aplicación de reacción conduce a la siguiente estructura de directorios:

- 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]

Por [crypto], me refiero a las cadenas generadas aleatoriamente generadas en tiempo de construcción.

Una vez recibido el archivo index.html , el navegador realiza las siguientes solicitudes:

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

Mi pregunta es entonces: ¿cómo debo hacer para servir estos archivos? Se me ocurrió esto:

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'')

De esta manera, los activos estáticos son servidos con éxito. Pero no es una solución muy elegante.

Por otro lado, podría incorporar esto a las utilidades estáticas incorporadas en el matraz. Pero no entiendo cómo configurar esto.

Realmente no sé cómo manejar esto, hasta el punto de que me está haciendo reconsiderar mi uso de la aplicación crear-reaccionar, ya que me obliga a estructurar mi carpeta estática de una manera muy específica e inconveniente: no hay manera de para cambiar la forma en que la aplicación solicita contenido estático del servidor.

En general: ¿Es mi solución lo suficientemente robusta? ¿Hay alguna forma de utilizar las características integradas del matraz para servir a estos activos? ¿Hay una mejor manera de usar la aplicación crear-reaccionar? Cualquier entrada es apreciada. Puedo proporcionar más información si es necesario.

Gracias por leer !

Answer 1

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)

Eso es con lo que terminé. Así que basta con capturar todas las rutas, probar si la ruta es un archivo => enviar archivo => sino enviar el index.html. De esa manera, puede volver a cargar la aplicación de reacción desde cualquier ruta que desee y no se rompe.