server.py

Question

我试图将烧瓶服务器连接到使用create-react-app创建的react应用，并使用webpack对其进行捆绑。我主要关注通过this项目和this随附视频工作中学到的东西，除了我以默认的create-react-app为起点。

这是我的目录结构

-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 run watch和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配置以将其放置在新位置。

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

server.py

index.html

webpack.config.js

package.json

1 个答案: