React 框架与 Flask 框架的整合答案

【问题标题】：Integration of React framework and Flask frameworkReact 框架与 Flask 框架的整合
【发布时间】：2021-06-11 12:07:19
【问题描述】：

您好，我正在尝试配置 react 并将其与 Flask 框架集成，因此我编辑了 package.json 文件以添加自定义命令以运行 react 前端和 Flask 后端。

这是我在 package.json 文件中编辑的部分：

  "scripts": {
    "start": "react-scripts start",
    "start-app": "cd app && venv/bin/flask run --no-debugger",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

我添加了start-app 。当我运行 npm start-app 它没有运行时，我收到以下消息：

Usage: npm <command>

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ci, cit,
    clean-install, clean-install-test, completion, config,
    create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
    edit, explore, fund, get, help, help-search, hook, i, init,
    install, install-ci-test, install-test, it, link, list, ln,
    login, logout, ls, org, outdated, owner, pack, ping, prefix,
    profile, prune, publish, rb, rebuild, repo, restart, root,
    run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

npm <command> -h  quick help on <command>
npm -l            display full usage info
npm help <term>   search for help on <term>
npm help npm      involved overview

Specify configs in the ini-formatted file:
    C:\Users\username\.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

npm@6.14.13 C:\Program Files (x86)\nodejs\node_modules\npm

Did you mean this?
    start

我无法理解为什么它无法获得 start-app。注意：我在 windows 10 上使用 VS 代码

【问题讨论】：

标签： node.js python-3.x flask npm

【解决方案1】：

您可以同时使用 npm 包。它将帮助您仅通过响应一个命令来执行烧瓶应用程序。

您可以在这里了解更多信息：https://www.npmjs.com/package/concurrently

你可以在你的 package.json 中写入同时安装为 "start": "concurrently \"command1 arg\" \"command2 arg\""

【讨论】：

所以你的意思是在package.json里面我添加了这样一行"start": "concurrently "start": "react-scripts start", "start-app": "cd app && venv/bin/flask run --no-debugger""然后像这样运行npm start？
首先使用 npm install concurrently 并发安装。然后在 package.json 中写："start" : "concurrently \"react-scripts start\" \"cd app && venv/bin/flask run --no-debugger\""
试过了，我得到的错误是'venv' is not recognized as an internal or external command,
"start" : "concurrently \"react-scripts start\" \"cd app && cd venv/bin/flask run --no-debugger\"" 我想你也必须在此之前添加 cd 。
在您的帮助下，我认为我不需要第二条路径 venv/bin 我已将其删除并现在同时运行

【解决方案2】：

您需要有两个独立的项目；一个用于你的 React 前端，一个完全独立的 Python 项目用于你的 Flask API。它们通常通过 HTTPS 进行通信，因此您将在 Flask 中设置端点，并在 React 端使用 axios 之类的库来调用它们。

【讨论】：

我已经创建了两个项目，我有烧瓶应用程序和反应。现在我想使用 npm 来启动两者，因为我还在 package.json 从 React 重定向到 Flask 的末尾设置了“代理”键
啊，我明白了。您可以尝试仅在本地单独运行 Flask 应用程序，而在您的 npm 设置中没有任何引用吗？只需在 package.json 中添加 "proxy": "localhost:4000" 即可保留代理设置。