将react应用程序的构建包含到Flas中的正确方法

Question

我有一个网站开发完全使用烧瓶。它使用一个名为dashboards的蓝图，它承载一些视图来访问不同的可视化效果，即dashboards/<string: dashboard_name>

我用id、name和它所属的group来存储我的仪表板，因此用户只能从他们所属的组访问可视化效果。在

（这是我没有经验的解决这个问题的方法，所以我也愿意接受更好的设计模式的建议来实现这一点。）

我的项目看起来像这样

app
├── dashboards
│   ├── __init__.py
│   └── views.py
├── __init__.py
├── models
│   ├── dashboard.py
│   └── __init__.p
├── static
│   ├── css
│   │   ├── styles.css
│   └── js
│       └── scripts.js
└── templates
    ├── base.html
    └── dashboards
        ├── cat.html
        ├── clock.html
        ├── index.html
        ├── private.html
        └── public.html

我对仪表板蓝图的看法

^{pr2}$

以及仪表板蓝图

# app/dashboards/__init__.py

from flask import Blueprint

dashboards = Blueprint('dashboards', __name__)

from . import views

最后，我使用create_app模式

# app/__init__.py

# some imports happening here

def create_app(config_name):
    app = Flask(__name__)

    from .dashboards import dashboards as dashboards_blueprint
    app.register_blueprint(dashboards_blueprint, url_prefix='/dashboards')

    return app

在app之上的一个级别上，manage.py调用create_app方法，传递一些配置属性。我相信这是烧瓶里常见的图案。我也相信这与我的问题无关。在

特别是，如果使用create react app包部署react应用程序，即使用npm run build，则输出是一个文件夹/build，其中包含运行该应用程序所需的静态文件。例如，该文件夹具有以下结构

├── build
│   ├── asset-manifest.json
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   ├── service-worker.js
│   └── static
│       ├── css
│       │   ├── main.<some-hash-1>.css
│       │   └── main.<some-hash-1>.css.map
│       └── js
│           ├── main.<some-hash-2>.js
│           └── main.<some-hash-2>.js.map
other files here

现在，如果想用Flask插入这个react应用程序，我现在要做的是将/css和/js中的文件移动到/app内的/static文件夹，并将index.html从/build重命名为让我们说的“react”-仪表板.html'并将其移动到templates/dashboards。在

这是一种非常愚蠢的方法来让基本的应用程序正常工作，但是我不知道把/build中的其他文件放在哪里，以免出现更好的设计模式。在

从这个README我可以调整蓝图定义并将模板和静态文件夹移动到app/dashboards内，但我仍然不知道其他文件如service-worker.js和清单等在哪里。在

在Flask应用程序上“挂载”已部署的react应用程序的正确方法是什么？我知道从/build重新组织文件是不需要的。在

Answer 1

我已经解决了调整蓝图

bp = Blueprint(name='myblueprint', 
                    import_name=__name__,
                    static_folder='static/myblueprint',
                    template_folder='templates',
                    static_url_path='/static', # this is what myblueprint.static will point to
                    url_prefix='/myblueprint', 
                    subdomain=None,
                    url_defaults=None, 
                    root_path=None)

这样，蓝图中的静态路径将指向/myblueprint/static，我需要修改create-react-app构建文件夹。在

• 将对/build中每个*.css、*.js和.html中的static的调用替换为/myblueprint/static
• 重新排列/build中的文件夹以匹配我的蓝图static文件夹。
  • 将/build/static移到/blueprint/static
  • 在调用这些文件的/blueprint/templates/index.html中设置我自己的jinja模板。确保此文件指向/myblueprint/static中的静态资产，而不是/build/static。在

我已经创建了一个gulpfile来自动执行这个过程

^{pr2}$

这样，您就可以从与gulpfile.js相同的路径运行gulp，并且应该覆盖所有内容。在