python - Flask blueprint static directory does not work?

Question

According to the Flask readme, blueprint static files are accessible at blueprintname/static. But for some reason, it doesn't work.

My blueprint is like this:

• app/frontend/views.py :

  frontend = Blueprint('frontend', __name__, 
                       template_folder='templates',
                       static_folder='static')
  
  @frontend.route('/') etc...
  

• app/frontend/js/app.js : my javascript

• Blueprint registered in Flask app (routes work and everything)

When I go to abc.com/frontend/static/js/app.js, it just gives a 404.

When I follow the Flask readme to get my static files:

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

The output is

<script src="/static/js/app.js"></script>

Which doesn't work either. There's nothing in my root app/static/ folder.

I can't access any static files in my blueprint! Flask read me says that it should work!

admin = Blueprint('admin', __name__, static_folder='static')

By default the rightmost part of the path is where it is exposed on the web. Because the folder is called static here it will be available at the location of the blueprint + /static. Say the blueprint is registered for /admin the static folder will be at /admin/static.

Answer 1

I include an argument to the static_url_path parameter to ensure that the Blueprint's static path doesn't conflict with the static path of the main app.

e.g:

admin = Blueprint('admin', __name__, static_folder='static', static_url_path='/static/admin')

Answer 2

You probably registered your Blueprint to sit at the root of your site:

app.register_blueprint(core, url_prefix='')

but the static view in the Blueprint is no different from all your other Blueprint views; it uses that url_prefix value to make the URL unique.

The core static view is also active, so you now have two routes that want to handle /static/ URLs. So if you are registering your Blueprint without a URL prefix, you have to give one of these two a unique path.

Either give the Blueprint a custom static_url_path value, or the core Flask app.

Answer 3

It worked for me by initializing blueprint like this:

configuration = Blueprint('configuration', __name__, template_folder='templates',static_folder='static')

Then referencing to static file like this

href="{{ url_for('.static', filename='css/base.css') }}"

There is a dot before static in href.

Answer 4

I am using Flask blueprints.

My web app Attendance Manager has three types of users, admin, teacher and student.

Here is how a part of the file structure looks:

+---app.py
|
|
+---student
|   |   student.py
|   |   __init__.py
|   |   
|   +---static
|   |   +---css
|   |   |       login-page.css
|   |   |       signup-page.css
|   |   |       
|   |   \---js
|   |           firebaseConfig.js
|   |           
|   +---templates
|   |       base.html
|   |       student-login-page.html
|   |       student-signup-page.html

app.py:

app.register_blueprint(student, url_prefix='/student')

student.py:

student = Blueprint('student', __name__, static_folder='static', template_folder='templates')

student-login-page.html:

<link rel="stylesheet" type="text/css" href="{{ url_for('student.static', filename='css/login-page.css') }}">

Adding 'the_name_of_the_blueprint.static' to the first parameter of url_for() in the student-login-page.html (or wherever you are linking your css) helped me resolve the problem.

Found the solution here, in the official docs.

This GitHub issue or this Reddit post might help you if this did not resolve your problem.

All the best!

Answer 5

I'm a little late, but none of the previous answers did really help me in achieving what I needed. I found out that I needed to do a bit of "tricks" to make the module's static folder work as I intended. My application is composed of several modules, but for now just pretend we had "application" as the main application folder and "locations" as the module's folder where a local "static" directory is placed (where we need to load static files for this module). The following is what I did:

1. In the main application's __init__py file I added url_prefix='/' to my Blueprint's definition
2. In my module's routes.py file I used both static parameters: static_folder='static' and 'static_url_path='/locations/static' to declare the Blueprint
3. In the html template (which extends a template in the main application's folder), I used the following to retrieve the path to the static css file: {{url_for('locations_bp.static', filename='css/style.css')}} (locations_bp is my Bluprint's name for "locations" module)

This way, the css file is loaded as /locations/static/css/style.css and this is exactly what I wanted to achieve: above all, the url_prefix I used allows me to avoid having a prefix on all my module's routes