使用Flask服务通过create-react-app创建的前端 [英] Serving a front end created with create-react-app with Flask
问题描述
我有一个带有API路由的Flask后端,可通过使用create-react-app创建的React单页应用程序访问。当使用create-react-app开发服务器时,我的Flask后端可以工作。
I have a Flask back-end with API routes which are accessed by a React single page application created using create-react-app. When using the create-react-app dev server, my Flask back end works.
我想从我的Flask服务器提供内置的React应用(使用 npm run build
)。构建React应用程序将导致以下目录结构:
I would like to serve the built (using npm run build
) static React app from my Flask server. Building the React app leads to the following directory structure:
- 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]
通过 [crypto]
,我的意思是在生成时生成的随机生成的字符串。
By [crypto]
, I mean the randomly generated strings generated at build time.
已收到 index.html
文件,然后浏览器发出以下请求:
Having received the index.html
file, the browser then makes the following requests:
- GET /static/css/main.[crypto].css
- GET /static/css/main.[crypto].css
- GET /service-worker.js
我应该如何提供这些文件?我想出了这个:
How should I serve these files? I came up with this:
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')
这样,静态资产就可以成功使用。
This way, the static assets are successfully served.
另一方面,我可以将其与内置的Flask静态实用程序合并。但是我不知道如何配置它。
On the other hand, I could incorporate this with the built-in Flask static utilities. But I do not understand how to configure this.
我的解决方案是否足够健壮?有没有办法使用内置的Flask功能来提供这些资产?有没有更好的方法来使用create-react-app?
Is my solution robust enough? Is there a way to use built-in Flask features to serve these assets? Is there a better way to use create-react-app?
推荐答案
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(app.static_folder + '/' + path):
return send_from_directory(app.static_folder, path)
else:
return send_from_directory(app.static_folder, 'index.html')
if __name__ == '__main__':
app.run(use_reloader=True, port=5000, threaded=True)
这就是我最终得到的结果。因此,基本上捕获所有路由,测试路径是否为文件=>发送文件=>否则发送index.html。这样,您可以从任何希望的路线重新加载react应用,并且不会中断。
Thats what I ended up with. So bascially catch all routes, test if the path is a file => send file => else send the index.html. That way you can reload the react app from any route you wish and it does not break.
这篇关于使用Flask服务通过create-react-app创建的前端的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!