使用 Flask 为使用 create-react-app 创建的前端提供服务

2024-02-10

我有一个带有 API 路由的 Flask 后端,由使用 create-react-app 创建的 React 单页应用程序访问。当使用 create-react-app 开发服务器时,我的 Flask 后端可以工作。

我想为构建的服务(使用npm run build)来自我的 Flask 服务器的静态 React 应用程序。构建 React 应用程序会产生以下目录结构:

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

By [crypto],我的意思是在构建时生成的随机生成的字符串。

收到后index.html文件,浏览器然后发出以下请求:

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

我应该如何提供这些文件?我想出了这个:

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

这样,静态资源就服务成功了。

另一方面,我可以将其与内置 Flask 静态实用程序结合起来。但我不明白如何配置这个。

我的解决方案足够强大吗?有没有办法使用内置的 Flask 功能来服务这些资产?有更好的方法来使用 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。这样你就可以从任何你想要的路线重新加载反应应用程序,并且它不会中断。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Flask 为使用 create-react-app 创建的前端提供服务 的相关文章

  • DreamPie 不适用于 Python 3.2

    我最喜欢的 Python shell 是DreamPie http dreampie sourceforge net 我想将它与 Python 3 2 一起使用 我使用了 添加解释器 DreamPie 应用程序并添加了 Python 3 2
  • 想要动态处理与分页相关的页码显示:ReactJS

    我有一些分页逻辑工作得很好 唯一的问题是我只能让它显示并固定数量的页面可供选择 现在我已经把它放到了 5 页 但我希望它能够根据总记录动态更改 假设我有 100 条记录 每页限制为 10 条 将有 10 页 现在我只能让它以这种方式显示 第
  • 如何打印没有类型的defaultdict变量?

    在下面的代码中 from collections import defaultdict confusion proba dict defaultdict float for i in xrange 10 confusion proba di
  • 从 React Native Js 代码调用 Android Native UI 组件方法

    我创建了一个 CustomView SignatureView java 它扩展了 LinearLayout 以捕获 Android Native 中的签名 并创建了SignatureCapturePackage java和Signatur
  • 从回调中访问状态

    我在从回调访问组件状态时遇到问题 国家的价值num更改正确 但此类更改对于加载时定义的回调函数不可见 import React useState from react class MyObject callback gt void cons
  • 如何在 Sublime Text 2 的 OSX 终端中显示构建结果

    我刚刚从 TextMate 切换到 Sublime Text 2 我非常喜欢它 让我困扰的一件事是默认的构建结果显示在 ST2 的底部 我的程序产生一些很长的结果 显示它的理想方式 如在 TM2 中 是并排查看它们 如何在 Mac 操作系统
  • Python 多处理示例不起作用

    我正在尝试学习如何使用multiprocessing但我无法让它发挥作用 这是代码文档 http docs python org 2 library multiprocessing html from multiprocessing imp
  • 如何等到 Excel 计算公式后再继续 win32com

    我有一个 win32com Python 脚本 它将多个 Excel 文件合并到电子表格中并将其另存为 PDF 现在的工作原理是输出几乎都是 NAME 因为文件是在计算 Excel 文件内容之前输出的 这可能需要一分钟 如何强制工作簿计算值
  • Python tcl 未正确安装

    我刚刚为 python 安装了graphics py 但是当我尝试运行以下代码时 from graphics import def main win GraphWin My Circle 100 100 c Circle Point 50
  • 运行多个 scrapy 蜘蛛的正确方法

    我只是尝试使用在同一进程中运行多个蜘蛛新的 scrapy 文档 http doc scrapy org en 1 0 topics practices html但我得到 AttributeError CrawlerProcess objec
  • 如何在另一个自定义 Hook 中使用返回值的自定义 Hook?

    我正在使用 React native 其中有一个名为的自定义 HookuseUser使用以下方法从 AWS Amplify 获取用户信息Auth getUserInfro方法 然后获取返回对象的一部分并用它设置一个状态变量 我还有另一个名为
  • IRichBolt 在storm-1.0.0 和 pyleus-0.3.0 上运行拓扑时出错

    我正在运行风暴拓扑 pyleus verbose local xyz topology jar using storm 1 0 0 pyleus 0 3 0 centos 6 6并得到错误 线程 main java lang NoClass
  • python pandas 中的双端队列

    我正在使用Python的deque 实现一个简单的循环缓冲区 from collections import deque import numpy as np test sequence np array range 100 2 resha
  • Python:尝试检查有效的电话号码

    我正在尝试编写一个接受以下格式的电话号码的程序XXX XXX XXXX并将条目中的任何字母翻译为其相应的数字 现在我有了这个 如果启动不正确 它将允许您重新输入正确的数字 然后它会翻译输入的原始数字 我该如何解决 def main phon
  • 为美国东部以外地区的 Cloudwatch 警报发送短信?

    AWS 似乎没有为美国东部以外的 SNS 主题订阅者提供 SMS 作为协议 我想连接我的 CloudWatch 警报并在发生故障时接收短信 但无法将其发送到 SMS YES 经过一番挖掘后 我能够让它发挥作用 它比仅仅选择一个主题或输入闹钟
  • 用于运行可执行文件的python多线程进程

    我正在尝试将一个在 Windows 上运行可执行文件并管理文本输出文件的 python 脚本升级到使用多线程进程的版本 以便我可以利用多个核心 我有四个独立版本的可执行文件 每个线程都知道要访问它们 这部分工作正常 我遇到问题的地方是当它们
  • 对输入求 Keras 模型的导数返回全零

    所以我有一个 Keras 模型 我想将模型的梯度应用于其输入 这就是我所做的 import tensorflow as tf from keras models import Sequential from keras layers imp
  • Spark.read 在 Databricks 中给出 KrbException

    我正在尝试从 databricks 笔记本连接到 SQL 数据库 以下是我的代码 jdbcDF spark read format com microsoft sqlserver jdbc spark option url jdbc sql
  • 改变字典的哈希函数

    按照此question https stackoverflow com questions 37100390 towards understanding dictionaries 我们知道两个不同的字典 dict 1 and dict 2例
  • Pandas 与 Numpy 数据帧

    看这几行代码 df2 df copy df2 1 df 1 df 1 values 1 df2 ix 0 0 我们的教练说我们需要使用 values属性来访问底层的 numpy 数组 否则我们的代码将无法工作 我知道 pandas Data

随机推荐

  • 结合UIView动画块和OpenGL ES渲染

    我正在开发一款 iP 游戏 并且使用 UIKit 和 OpenGL ES 2 0 UIKit 元素在 OpenGL 视图上渲染并占据大量 任意 屏幕空间 我必须承认苹果做得非常出色 游戏的帧率始终保持在60 FPS 为了得出这个结论 我做了
  • php自定义异常

    我想知道如何编写自定义异常处理程序 这样我就可以做类似的事情 throw new dbException sql message 并让它输出 您的查询有误 消息 消息 查询 sql 这里 行 行异常被抛出 文件 抛出文件异常 但我也想捕获例
  • 如何在您的应用程序中获取 Elastic Beanstalk 应用程序版本?

    我们希望能够在 PHP 代码中检索 elastic beanstalk 应用程序版本 我没有看到 EB 在任何服务器配置文件中将其传递给我们 我觉得这很奇怪 还有其他人知道我们如何才能得到这个吗 至少对于 Docker 容器 您可以使用存储
  • Python:在 CSV 中得到 \xa0 而不是空格,无法删除或转换

    我有一个与 python 中的编码问题相关的问题 IPython笔记本 由于此类问题非常常见且简单 但我仍然无法真正解决它 我有一个CSV http www montefiore ulg ac be glouppe 2012 2013 ch
  • Sails js - 创建资产的副本

    我们正在考虑将我们的项目移植到 Sails js 我们的静态资产非常大 超过 3 GB 因此 这造成了严重的限制 因为它使我们的应用程序的大小增加了一倍 我们可以修改 Sails js 以防止这种默认行为吗 或者有人可以推荐其他框架吗 Sa
  • 使用 pry 时立即在 Rails 控制台中同时评估多行代码?

    假设我们有pry安装好后 打开rails控制台 然后运行 times 1 5 10 30 72 sample 1 0 nums 1 72 num sample nums sample times 计算在第 2 行之后停止 因为第二行的输出超
  • 如何让Android系统对所有apk强制使用LANDSCAPE?

    为了实现这一点 我在android系统 v4 04 中进行了三种修改 它们是 1 WindowsManagerService java 修改了getOrientationFromWindowsLocked 2 Activity java 修
  • Angular2 rxjs - switchmap 捕获错误

    我希望能够处理调用时出错的任何错误this authService refreshToken 可以在 switchmap 块内处理错误吗 或者在这种情况下我该如何处理错误 post3 endpoint string body string
  • Android 中的“-journal”SQLite 数据库是什么?

    在我的andoid应用程序的数据库目录 data data com me myApp databases 中 对于我创建的每个sqlite数据库 都有一个同名的相应数据库 名称后附加 journal 例如 myDatabase myData
  • 在 web.config 中设置多个 SMTP 设置?

    我正在构建一个应用程序 需要在发送电子邮件时动态 编程地了解并使用不同的 SMTP 设置 我习惯使用 system net mailSettings 方法 但据我了解 这种方法一次只允许一个 SMTP 连接定义 由 SmtpClient 使
  • 灵活或居中页面 HTML CSS

    我必须使用灵活或居中的页面设计 即使用户屏幕分辨率为 800 600 也能正常工作 当我缩小页面时 元素会移动并改变它们的位置 灵活页面或居中页面正常吗 如果不是应该怎样 页面的 CSS 代码 body margin left auto m
  • 以编程方式为 ViewController 创建选项卡栏

    我一直在考虑以编程方式向我的视图控制器添加一个选项卡栏 因为有一个滚动视图 如果它不在我的视图中间 我就无法将其放置在上面 我对如何添加它有点困惑 是否需要在我的ViewDidLoad方法或我的AppDelegate 如果我有 UITabB
  • 如何从包含为 jar 的不同项目模块 @Inject 对象

    我在多模块 Maven 项目中使用 Vaadin CDI 其中包含一个通用类 如接口 抽象类等 所需的模块 我的问题是 我无法 Inject带注释的类 UIScoped像往常一样 它被放置在core模块到另一个 我还在得到不满意解决异常 S
  • 所有可能的词

    我想使用 a z 创建所有可能的 5 个字母单词 请建议任何好的且快速的算法 我尝试过创建一个 它看起来像这样 byte allchar new byte a b c d e f g h i j k l m n o p q r s t u
  • 如何在 iPad 版 Safari 中使用 jQuery 识别触摸事件?是否可以?

    是否可以使用 jQuery 识别 iPad Safari 浏览器上的触摸事件 我在 Web 应用程序中使用了 mouseOver 和 mouseOut 事件 由于没有 mouseOut 和 mouseMove 等事件 iPad 的 Safa
  • Django 无法从 django.contrib.auth.views 导入登录信息

    我尝试为我的页面构建登录功能 要按如下方式编辑 urls py 它会不断打印 无法从 django contrib auth views 导入名称 login 我该如何处理这个问题 from django contrib auth view
  • C++:0.和0.0之间的区别?

    我很清楚之间的区别0 and 0 0 整数和双精度 但这之间有什么区别吗0 and 0 0 请注意 预先非常感谢 Axel 没有区别 两个文字都是双精度的 来自 C 语法 fractional constant digit sequence
  • 使用 JavaScript 动态伪元素 CSS

    是否可以动态设置伪元素的CSS 例如 jQuery 动态样式帮助容器 help css width windowWidth xOffset height windowHeight yOffset bottom windowHeight le
  • LINQ - 对特定类型的类进行分组

    这个问题类似于LINQ 将一种类型的项目分组 https stackoverflow com questions 2835192 linq group one type of item但以更通用的方式处理 我有一个包含各种派生类的列表 我可
  • 使用 Flask 为使用 create-react-app 创建的前端提供服务

    我有一个带有 API 路由的 Flask 后端 由使用 create react app 创建的 React 单页应用程序访问 当使用 create react app 开发服务器时 我的 Flask 后端可以工作 我想为构建的服务 使用n