r/flask • u/SusBakaMoment • 13d ago

Ask r/Flask How to navigate through file tree using `url_for` with flask buleprint?

I'm having trouble making my web app to read static style .css file when using flask blueprint. The HTML fails to read this stylesheet. I'm going describe how the project files are structured followed by the content of each files.

Project structure

Below is the file structure tree:

main.py
coolest_app/
├── __init__.py
└── pages/
    ├── __init__.py
    ├── templates/
    │   ├── base.html
    └── static/
        └── styles/
            └── base.css

There are in total 5 files within this project. But, I'm only giving the content of 4 files only since the .css file content is irrelevant.

a. main.py file

from coolest_app import create_app

app = create_app()

if __name__ == "__main__":
    app.run(debug=True, host="0.0.0.0", port="10000")

b. coolest_app/__init__.py file

from flask import Flask


def create_app():
    app = Flask(__name__)
    app.config["SECRET_KEY"] = "temporary"

    from .pages import pages
    app.register_blueprint(pages, url_prefix="/")
    return app

c. coolest_app/pages/__init__.py file

from flask import Blueprint, render_template, make_response

pages = Blueprint(
    "pages",
    __name__,
    template_folder="templates",
    static_folder="static",
)


@pages.route("/")
def homepage():
    page = render_template("base.html")
    resp = make_response(page)
    return resp

d. coolest_app/pages/templates/base.html file

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="{{ url_for('static', filename='styles/base.css') }}"/>
    </head>

    <body>
        <h1>Hello, world!</h1>
    </body>
</html>

If anyone knows how to navigate through file tree using url_for(), please help me out 😭. Thank you in advance.

1 Upvotes

100% Upvoted

5 comments sorted by

2

u/jlw_4049 13d ago

I'd restructure the project to something like this https://github.com/jessielw/Blog-Flask.

But you can use url for to select static and go from there.

url_for('static', filename='path/from/static.js')

2

u/SusBakaMoment 13d ago

I have problem structuring my Flask project. I should've thought about learning it from existing github repo. Thank you so much bro!

2

u/jlw_4049 13d ago

No problem, happy coding!

2

u/NonPraesto 13d ago edited 13d ago

There are two problems with the code:

First, In order to refer to a Blueprint's static folder, One must use blueprint_name.static , in this case:

<link rel="stylesheet" href="{{ url_for('pages.static', filename='styles/base.css') }}"/>

But in this particular case, It won't work because the pages Blueprint must have a url_prefix other than "/" in order for you to be able to refer to its static folder at all. From the documentation:

If the blueprint does not have a url_prefix, it is not possible to access the blueprint’s static folder. This is because the URL would be /static in this case, and the application’s /static route takes precedence. Unlike template folders, blueprint static folders are not searched if the file does not exist in the application static folder.

This is all explained in the Flask documentation on Blueprints, I highly suggest giving it a read as it's concise and well thought-out.

Good luck with your coding;

2

u/SusBakaMoment 13d ago

Thank you so much! That's the only doc I needed to understand. One way I use to make it work without url_prefix is to pass static_url_path argument when making the blueprint!