无法从 Flask 后端呈现 create-react-app 样板视图

Question

我很难将 create-react-app 单页应用程序集成到我的 Flask 后端。我希望能够像这样从我的前端进行 fetch/axios 调用：axios.get('/getResults') 和 fetch('/getResults')。我尝试过但不限于将 Flask 端口指定为 3000，这与 create-react-app 使用的相同。此外，在 create-react-app 的 "package.json" 文件上使用了代理配置功能，但无济于事。我怀疑我的文件夹结构和 Flask 代码实现可能是造成这种情况的原因。下面是我的文件夹结构和 "app.py" 代码。我将不胜感激。如有必要，我可以提供更多信息。谢谢

项目
-build(包含静态文件夹，index.html...其他元文件)
-node_modules
-public
-src
app.py
package.json
requirements.txt

app.py:

from flask import Flask, Response, request, jsonify, make_response, send_from_directory,render_template

app = Flask(__name__, static_path='/build/static/')
app.debug=True

@app.route('/')
def root():
    print('Inside root function')
    return app.send_static_file('index.html')

@app.route('/getResults', methods=["GET"])
def results():
    print('Inside getResults path')
    return app.send_static_file('index.html')

@app.route('/postData', methods=["POST"])
def data_results():
    print('Inside postData path')
    data = request.get_json
    return jsonify(data)

@app.route('/<path:path>')
def send_js(path):
    print("inside send_js fxn")
    return send_from_directory('./build/static',path)


if __name__ == "__main__":
    print("inside main host call")
    app.run(host='0.0.0.0', port=3000)

我在运行 "python app.py" 时遇到的错误是：

在终端上：内部 root 函数 127.0.0.1 - - [12/Jun/2017 09:42:24] "GET / HTTP/1.1" 404 -

在 browser:Not 上找到 - 在服务器上找不到请求的 URL。如果您手动输入 URL，请检查您的拼写并重试。

Answer 1

我觉得你有很多误解。

create-react-app 运行s 在它自己的服务器上的端口 3000 上，如果你尝试运行你的烧瓶应用程序在同一台机器上的同一端口上，它会抱怨该端口3000 已在使用中。因此，从这里我们转向另一个问题 - 您的应用程序的结构。

它会是一个独立的前端基于 reactjs 的客户端，api 后端基于 flask，这将是 2 个独立的应用程序，它们通过 HTTP 相互通信吗？在这种情况下，前端和后端通常运行在不同的服务器上。

或者将在其模板页面中使用 reactjs 的 flask 应用程序？

您可以通过在您的代码中更改为以下内容来解决当前未找到 URL 的问题：

@app.route('/')
def root():
    print('Inside root function')
    return render_template('index.html')

还有这个：

template_dir = os.path.abspath('build/templates')
app = Flask(__name__, static_path='/build/static/',
            template_folder=template_dir)

因为您的模板文件夹位于 build 目录中。

Answer 2

我遇到了完全相同的问题，我能够通过使用符号链接安抚 Flask 来解决它。

将模板和静态目录路径保留为默认值，并在包含 Flask 主文件的目录中添加这些符号链接

ln -s build/ templates
ln -s build/static static

如果你好奇的话，这是我的具体问题，它只是涉及更多的嵌套目录，但本质上是一样的：

然后您可以使用 Nurzhan 的根配置：

@app.route('/')
def root():
    print('Inside root function')
    return render_template('index.html')

但您只需要您的应用声明为：app = Flask(__name__)

唯一对我不起作用的是网站图标，我会在弄清楚后更新此答案。

Answer 3

在开发模式下，您需要配置您的 create-react-app package.json 以将 "ajax" 请求转发到 flask 服务器。

这是我的 package.json 的样子：

{
  "name": "socialite",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8080",
  "devDependencies": {
    "react-scripts": "1.0.10"
  },
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

看到 proxy 字段了吗？这就是魔法发生的地方，用烧瓶服务器地址替换它的值。这样，您就可以利用 CRA 热重载功能。这记录在 create-react-app as "Proxying API Requests in Development"

然后执行运行你的应用程序，你去 localhost:3000 或 yarn 为你打开的任何端口。当你在 API 中调用 javascript 通过彩虹到服务器时： fetch('/api/model/') 或者 nodejs 的服务器将转发到烧瓶应用程序。我认为 nodejs 服务器确实会查看 ajax 请求的内容类型字段，以了解它是否应该将请求转发给后端服务器。

我建议您在所有后端路由前加上 /api/v1/ 之类的前缀，这样 nginx 配置就整洁且易于编写。

无法从 Flask 后端呈现 create-react-app 样板视图

Unable to render create-react-app boilerplate views from Flask backend

python

flask

reactjs

create-react-app