Flask Bootstrap 404 Static Resources on Non-Root Paths

Question

I have a Flask app using Flask Bootstrap (V3.3.7.1), using the local serving of the bootstrap files.

bootstrap = Bootstrap(app)
app.config['BOOTSTRAP_SERVE_LOCAL'] = True

I am embedding this application into an iFrame which passes these requests over a proxy and once I move away from the root path of the application, I start to get 404 errors for loading these static files.

My project structure is very straightforward -

$ tree
.
+-- app
¦   +-- api.py
¦   +-- forms.py
¦   +-- __init__.py
¦   +-- routes.py
¦   +-- templates
¦       +-- base.html
¦       +-- index.html
¦       +-- login.html
¦       +-- logs.html
¦       +-- scaninvestigation.html
+-- config.py
+-- pilotscriptsui.py
+-- requirements.txt
+-- run.sh

There is nothing customizaed inside the template itself which is overriding these paths - everything is using the default values.

> cat app/templates/scaninvestigation.html

{% extends "base.html" %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block app_content %}
...
{% endblock %}

Here are the logs for a working request of these static files -

192.168.64.8 - - [12/Feb/2021 12:55:17] "GET https://flask-dev-app.internal-apps.com:9999/ HTTP/1.1" 200 -
2021-02-12 12:55:17 - _internal._log (113) - INFO - 192.168.64.8 - - [12/Feb/2021 12:55:17] "GET https://flask-dev-app.internal-apps.com:9999/ HTTP/1.1" 200 -
2021-02-12 12:55:18 - routes.before_request (100) - INFO - Remote User: 43316732
192.168.64.8 - - [12/Feb/2021 12:55:18] "GET https://flask-dev-app.internal-apps.com:9999/static/bootstrap/css/bootstrap.min.css?bootstrap=3.3.7.1.dev1 HTTP/1.1" 200 -
2021-02-12 12:55:18 - _internal._log (113) - INFO - 192.168.64.8 - - [12/Feb/2021 12:55:18] "GET https://flask-dev-app.internal-apps.com:9999/static/bootstrap/css/bootstrap.min.css?bootstrap=3.3.7.1.dev1 HTTP/1.1" 200 -
2021-02-12 12:55:18 - routes.before_request (100) - INFO - Remote User: 43316732
192.168.64.8 - - [12/Feb/2021 12:55:18] "GET https://flask-dev-app.internal-apps.com:9999/static/bootstrap/jquery.min.js?bootstrap=3.3.7.1.dev1 HTTP/1.1" 200 -
2021-02-12 12:55:18 - _internal._log (113) - INFO - 192.168.64.8 - - [12/Feb/2021 12:55:18] "GET https://flask-dev-app.internal-apps.com:9999/static/bootstrap/jquery.min.js?bootstrap=3.3.7.1.dev1 HTTP/1.1" 200 -
2021-02-12 12:55:18 - routes.before_request (100) - INFO - Remote User: 43316732
192.168.64.8 - - [12/Feb/2021 12:55:18] "GET https://flask-dev-app.internal-apps.com:9999/static/bootstrap/js/bootstrap.min.js?bootstrap=3.3.7.1.dev1 HTTP/1.1" 200 -
2021-02-12 12:55:18 - _internal._log (113) - INFO - 192.168.64.8 - - [12/Feb/2021 12:55:18] "GET https://flask-dev-app.internal-apps.com:9999/static/bootstrap/js/bootstrap.min.js?bootstrap=3.3.7.1.dev1 HTTP/1.1" 200 -

Here is a log once we move off the root path and I start to get 404s for all resources and none of the CSS or JS works on the remote page. You can see that it is looking for the static resources at the new /scaninvestigation path instead of the root path which worked above.

2021-02-12 12:56:32 - routes.before_request (100) - INFO - Remote User: 43316732
192.168.64.8 - - [12/Feb/2021 12:56:32] "GET https://flask-dev-app.internal-apps.com:9999/scaninvestigation HTTP/1.1" 200 -
2021-02-12 12:56:32 - _internal._log (113) - INFO - 192.168.64.8 - - [12/Feb/2021 12:56:32] "GET https://flask-dev-app.internal-apps.com:9999/scaninvestigation HTTP/1.1" 200 -
2021-02-12 12:56:32 - routes.before_request (100) - INFO - Remote User: 43316732
192.168.64.8 - - [12/Feb/2021 12:56:32] "GET https://flask-dev-app.internal-apps.com:9999/scaninvestigation/static/bootstrap/css/bootstrap.min.css?bootstrap=3.3.7.1.dev1 HTTP/1.1" 404 -
2021-02-12 12:56:32 - _internal._log (113) - INFO - 192.168.64.8 - - [12/Feb/2021 12:56:32] "GET https://flask-dev-app.internal-apps.com:9999/scaninvestigation/static/bootstrap/css/bootstrap.min.css?bootstrap=3.3.7.1.dev1 HTTP/1.1" 404 -
2021-02-12 12:56:33 - routes.before_request (100) - INFO - Remote User: 43316732
192.168.64.8 - - [12/Feb/2021 12:56:33] "GET https://flask-dev-app.internal-apps.com:9999/scaninvestigation/static/bootstrap/jquery.min.js?bootstrap=3.3.7.1.dev1 HTTP/1.1" 404 -
2021-02-12 12:56:33 - _internal._log (113) - INFO - 192.168.64.8 - - [12/Feb/2021 12:56:33] "GET https://flask-dev-app.internal-apps.com:9999/scaninvestigation/static/bootstrap/jquery.min.js?bootstrap=3.3.7.1.dev1 HTTP/1.1" 404 -
2021-02-12 12:56:33 - routes.before_request (100) - INFO - Remote User: 43316732
192.168.64.8 - - [12/Feb/2021 12:56:33] "GET https://flask-dev-app.internal-apps.com:9999/scaninvestigation/static/bootstrap/js/bootstrap.min.js?bootstrap=3.3.7.1.dev1 HTTP/1.1" 404 -
2021-02-12 12:56:33 - _internal._log (113) - INFO - 192.168.64.8 - - [12/Feb/2021 12:56:33] "GET https://flask-dev-app.internal-apps.com:9999/scaninvestigation/static/bootstrap/js/bootstrap.min.js?bootstrap=3.3.7.1.dev1 HTTP/1.1" 404 -

Any thoughts on what I can do to fix this and why it might be occurring? These CSS files are the default with the Python library and work just fine when not being passed via an iFrame / Proxy.

Answer 1

You need to add the bootstrap stylesheet

https://diyprojects.io/flask-bootstrap-html-interface-effortless-python-projects/#.YEi-_HVKi4A

You can use the table of contents to skip to:

Add the Bootstrap stylesheet

bootstrap_serve_local because you haven't exported it to the static directory