Добавление сервера Flask в приложение по умолчанию для создания приложения, 404 в /dist/bundle.js - PullRequest
Новая
       8

Добавление сервера Flask в приложение по умолчанию для создания приложения, 404 в /dist/bundle.js

0 голосов
/ 19 января 2019

Я пытаюсь подключить флеш-сервер к приложению реагирования, созданному с помощью create-реагировать-приложение, и использую веб-пакет для его связывания.Я в основном слежу за тем, что я узнал, работая с этим проектом и этим сопутствующим видео, за исключением того, что я использую приложение create-реагировать по умолчанию в качестве отправной точки.

Вот моя структура каталогов 

-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

По сути, моя "статическая" папка - это стандартное реагирующее приложение, плюс 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>

my 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 моего приложения, почемуРазве он не сможет их найти?

Возможно, мне не хватает некоторых фундаментальных понятий.Если это так, пожалуйста, укажите мне в правильном направлении

Заранее спасибо!

1 Ответ

0 голосов
/ 19 января 2019 
app = Flask(__name__, static_folder='..static/dist', template_folder='../static')

Вышесказанное, вероятно, сбивает с толку, и ..static не то же самое, что ../static

РЕДАКТИРОВАТЬ : Только что посмотрел учебник, который вы связали. Я оставлю ответ, который я написал ранее, но исправлю описанную выше опечатку на static_folder='../static/dist может быть более быстрым решением вашей проблемы.

Лично я бы упростил это, сделав следующее:

  • Обратите внимание, что ваш server.py находится в каталоге server
  • Создайте 2 подкаталога в этом каталоге server: 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 на более позднем этапе, вам также может понадобиться настроить конфигурацию веб-пакета, чтобы переместить его в новое место.

...