如何构建Flask + Reactjs项目

Question

我的问题是，当你创建一个同时使用Flask(后端)和Reactjs (前端)的应用程序时，如何组织目录。每个单独基础架构的默认结构如下：

在Flask中，结构是：

.
├── app.py
├── static
│   ├── foo.png
│   └── bar.csv
├── templates
│   ├── Predict.html
│   ├── home.html
│   ├── index.html
│   └── something.js
└── utlities.py

在React应用程序中，结构(当运行create-react-app时)是：

.
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

Answer 1

它已经成为标准的方式是保持前端和后端分离，如果使用react，它们不应该在flask项目文件夹中有html文件(它只适用于数据处理)。

Answer 2

假设我们想要构建一个hello模板，我将首先使用标准的Flask文件夹组织：

.
├── hello_template
    ├── configurations.py
    ├── __init__.py
    ├── README.md
    ├── run.py
    └── templates
        ├── hello
        │   ├── __init__.py
        │   └── views.py
        ├── __init__.py
        ├── public
        │   ├── css
        │   ├── fonts
        │   ├── images
        │   └── js
        └── static
            ├── index.html
            ├── __init__.py
            ├── js
               ├── components
               ├── index.jsx
               └── routes.js

然后通过在hello_template/templates/static/中打开终端并运行以下命令来添加React：

$ npm i react react-dom --save-dev