Flask не может найти js файл, хотя задан путь к статическому ресурсу.

Содержание

Вопрос или проблема
Ответ или решение
Структура проекта
Регистрация Blueprint
Проверка путей и структуры
Ошибка 404
Рекомендации по устранению ошибки
Заключение

Вопрос или проблема

Я использую setup.py в своем проекте:

from setuptools import find_packages, setup

with open("modules/requirements.txt", "r", encoding="utf-8") as file:
    requirements = file.read().splitlines()

setup(
    name="test-app",
    version="0.1",
    description="Тестовое приложение",
    packages=find_packages(where="modules"),
    package_dir={"": "modules"},
    license="MIT",
    install_requires=requirements,
    include_package_data=True
)

MANIFEST.in:

recursive-include modules *

Мой тестовый маршрут с Blueprint (я зарегистрировал Blueprint в main.py)

current_path: str = os.path.dirname(os.path.abspath(__file__))

test = Blueprint(
   name="test", 
   import_name=__name__,
   template_folder=os.path.join(current_path, "static", "templates"),
   static_folder=os.path.join(current_path, "static")
)

Загрузка шаблона работает без ошибок:

@test.route("/test", methods=["GET", "POST"])
def test():
    return render_template("test.html")

Если я теперь укажу путь к файлу JavaScript в test.html, я получаю эту ошибку:
GET http://127.0.0.1:5000/static/js/app.js net::ERR_ABORTED 404 (NOT FOUND)

Мой код test.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>...</title>
</head>
<body>
    <div class="container">
        <!-- ... -->
    </div>
    <script src="{{ url_for('test.static', filename="js/app.js") }}"></script>
</body>
</html>

Ответ или решение

Когда вы работаете с Flask и создаете веб-приложение с использованием статических файлов, иногда могут возникать проблемы, когда Flask не может найти определенные файлы, такие как JavaScript. Давайте детально рассмотрим вашу ситуацию и выявим возможные причины проблемы с загрузкой файла JavaScript в проекте на основе представленных данных.

Структура проекта

Для начала давайте проанализируем, каковы ваши настройки и структура проекта. Вы используете setuptools для настройки вашего приложения с помощью файла setup.py и MANIFEST.in для включения файлов в пакет. Обратите внимание на следующую часть вашего проекта:

setup.py: Убедитесь, что ваш requirements.txt правильно указывает необходимые библиотеки.
MANIFEST.in: Строка recursive-include modules * говорит системе, чтобы она включила все файлы из директории modules, однако это будет работать только в том случае, если статические файлы находятся в этой директории.

Регистрация Blueprint

Ваш код для создания Blueprint выглядит следующим образом:

test = Blueprint(
   name="test", 
   import_name=__name__,
   template_folder=os.path.join(current_path, "static", "templates"),
   static_folder=os.path.join(current_path, "static")
)

Здесь вы определяете template_folder и static_folder. Ваш JavaScript файл находится в директории static/js/app.js. Однако важно убедиться, что эта структура папок правильно организована и что Flask может получить доступ к этому местоположению.

Проверка путей и структуры

Проверьте структуру вашего проекта и убедитесь, что файлы JavaScript находятся по пути modules/static/js/app.js.
Убедитесь, что вы правильно указали путь в вашем HTML-шаблоне:

<script src="{{ url_for('test.static', filename='js/app.js') }}"></script>

Этот код использует функцию url_for для генерации URL для статического файла. Убедитесь, что имя Blueprint ('test') указано корректно.

Ошибка 404

Ошибка GET http://127.0.0.1:5000/static/js/app.js net::ERR_ABORTED 404 (NOT FOUND) указывает на то, что Flask не может найти ресурс по указанному пути. Это может происходить по нескольким причинам:

Неверный путь: Проверьте, что файл js/app.js действительно существует в вашем проекте.
Неправильная конфигурация Flask: Убедитесь, что вы правильно зарегистрировали Blueprint в вашем основном приложении Flask.
Логи: Ознакомьтесь с логами Flask, чтобы увидеть, как обрабатываются запросы к статическим файлам. Это может дать подсказки относительно источника проблемы.

Заключение

Для успешной работы вашего приложения важно правильно организовать структуру директорий, установить корректные пути для JavaScript файлов и убедиться, что Blueprint правильно зарегистрирован в вашем приложении Flask. Если все вышеперечисленное проверено и настроено, ваше приложение должно успешно загружать файлы JavaScript без ошибок 404.