将 Flask 服务器添加到 create-react-app 默认应用程序，/dist/bundle.js 上的 404

Question

我正在尝试将 Flask 服务器连接到使用 create-react-app 创建的 React 应用程序，并使用 webpack 将其捆绑。除了我使用默认的 create-react-app 作为起点外，我主要遵循我通过 this project and this 随附视频学到的东西。

这是我的目录结构

-SimpleApp
--server
----server.py
----__init__.py
--static
----dist
------bundle.js
------styles.css
----node-modules
----src
----package.json
----package-lock.json
----webpack.config.js
----index.html
----__init__.py
--venv

基本上我的“静态”文件夹是默认的 react-app，外加一个 index.html、一个配置文件和一个空的 init.py.

我的server.py很简单，我在里面设置了我的static_folder和template_folder

server.py

from flask import Flask, render_template, jsonify

app = Flask(__name__, static_folder='..static/dist', template_folder='../static')

@app.route('/')
def index():
    return render_template('index.html')

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

它调用我的 index.html 看起来像

index.html

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <link rel="stylesheet" href="dist/styles.css">
    <title>simple app</title>
   </head>
 <body>
    <div id="root" />
    <div>Hello</div>
    <script src="dist/bundle.js" type="text/javascript"></script>
   </body>
</html>

我的webpack.config.js是

webpack.config.js

const webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

const config = {
    entry:  __dirname + '/src/index.js',
    output: {
        path: path.join(__dirname + '/dist'),
        filename: 'bundle.js',
    },
    resolve: {
        extensions: [".js", ".jsx", ".css"]
    },
    module: {
        rules: [
            {
                test: /\.jsx?/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader',
                })
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: 'file-loader'
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('styles.css'),
    ]
};

module.exports = config;

和

package.json

{
  "name": "simpleapp",
  "version": "1.0.0",
  "description": "Fullstack Template",
  "main": "index.js",
  "scripts": {
    "build": "webpack -p --progress --config webpack.config.js",
    "dev-build": "webpack --progress -d --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --progress -d --config webpack.config.js --watch"
  },
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.11.2",
    "jquery": "^3.2.1",
    "react": "^15.6.1",
    "react-bootstrap": "^0.31.0",
    "react-dom": "^15.6.1",
    "style-loader": "^0.18.2",
    "webpack": "^3.12.0",
    "webpack-cli": "^3.2.1"
  }
}

我运行 npm 运行观看 python server.py 我得到

"GET /dist/styles.css HTTP/1.1" 404 -
"GET /dist/bundle.js HTTP/1.1" 404

这似乎可以追溯到 index.html。我不认为我的配置或包文件与它有任何关系，但我是新手，不想误解。

未找到的文件在我的应用程序 static_folder 中，为什么找不到它们？

我可能遗漏了一些基本概念。如果是这样，请指出正确的方向

提前致谢！

Answer 1

app = Flask(__name__, static_folder='..static/dist', template_folder='../static')

以上内容可能比较混乱，..static与../static

不一样

编辑：刚刚看了你链接的教程。我将在下面留下我之前写的答案，但将上面的错字修复为 static_folder='../static/dist 可能会更快地解决您的问题。

就我个人而言，我会通过执行以下操作来简化此操作：

请注意，您的 server.py 位于 server 目录中
在此 server 目录中创建 2 个子目录：templates 和 static
将index.html移动到server/templates
移动所有静态文件，包括 dist 子目录到 server/static

现在目录结构应该更像：

SimpleApp
└── server
    ├── __init__.py
    ├── server.py
    ├── static
    │   └── dist
    │       ├── bundle.js
    │       └── styles.css
    └── templates
        └── index.html

然后只需初始化应用程序：

app = Flask(__name__)

无需在此处定义静态和模板目录，因为您已将其放置在 Flask 期望的默认结构中。

尝试在浏览器中点击：http://localhost:5000/static/dist/bundle.js 并确认加载正确。

然后更新模板以从正确的位置加载这些文件，在模板中使用 url_for：

<link rel="stylesheet"
 href="{{ url_for('static', filename='dist/styles.css') }}"
>

和

<script type="text/javascript"
 src="{{ url_for('static', filename='dist/bundle.js') }}"
>

如果您稍后重新生成 bundle.js，您可能还需要调整 webpack 配置以将其放置在新位置。

将 Flask 服务器添加到 create-react-app 默认应用程序，/dist/bundle.js 上的 404

Adding Flask server to create-react-app default app, 404 on /dist/bundle.js

flask

http-status-code-404

reactjs

webpack

server.py

index.html

webpack.config.js

package.json