javascript - Reactjs create-react-app my-app 后端集成

标签 javascript python reactjs flask create-react-app

我使用 create-react-app 创建了一个基本应用程序。当我运行我的后端服务器时(在带有 flask 的 python 中),我提供默认的 index.html 文件:

from flask import Flask, render_template
app = Flask(__name__, static_folder='../web/public')

@app.route("/")
def index():
    return render_template('../web/public', 'index.html')

if __name__ == '__main__':
    app.run()

这是create-react-app生成的index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root">
    </div>
  </body>
</html>

当将此文件提供给浏览器时,它显然没有呈现任何内容,只有在从 create-react-app 生成的文件夹运行 npm start 时才会呈现 React 应用程序。如何仅使用我的 Flask 后端服务器来提供实际的应用程序?

我尝试链接 index.js 脚本:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

但是浏览器输出了Uncaught SyntaxError: Unexpected identifier 在行 import React from 'react';

基本上,我的问题是如何仅使用 Flask 服务器来提供 React 应用程序?

最佳答案

要在生产环境中使用通过 create-react-app 创建的应用程序,您可以运行此命令:

npm run build

这会创建一个 JavaScript 包,您可以将其部署到您的服务器。

参见 documentation

关于javascript - Reactjs create-react-app my-app 后端集成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48993316/

相关文章:

javascript - 如何使用回调函数修复错误?

python - 如何计算python中二进制变量之间的相关性?

python /Django : How to display error messages on invalid login?

python - Imshow - 用不同的像素大小分割

javascript - 如何更新 Firebase Firestore 中的动态字段名称?

javascript - 未捕获的语法错误 : Unexpected token < reactjs react-pdf

reactjs - ComponentWillUnmount 与 React Hooks 等效,可以访问状态变量的当前值?

javascript - 使用 CSS 和 JS 动态设置 div 尺寸时,如何补偿较长的加载时间?

javascript - 从获取请求中获取 html

javascript - 在 tableViewRow 中交换图像