Organizing static files

Organizing static files such as JavaScript, stylesheets, images, and so on efficiently is always a matter of concern for all web frameworks. In this recipe, we’ll learn how to achieve this in Flask.

How to do it...

Flask recommends a specific way of organizing static files in an application, as follows:

my_app/
    app.py
    config.py
    __init__.py
    static/
        css/
        js/
        images/
            logo.png

While rendering this in templates (say, the logo.png file), we can refer to the static files using the following code:

<img src='/static/images/logo.png'>

How it works...

If a folder named static exists at the application’s root level – that is, at the same level as app.py – then Flask will automatically read the contents of the folder without any extra configuration.

There’s more...

Alternatively, we can provide a parameter named static_folder to the application object while defining the application in app.py, as follows:

app = Flask(__name__,
    static_folder='/path/to/static/folder')

In the preceding line of code, static refers to the value of static_folder on the application object. This can be modified as follows by providing a URL prefix by supplying static_url_path:

app = Flask(
    _name_, static_url_path='/differentstatic',
    static_folder='/path/to/static/folder'
)

Now, to render the static file, we can use the following code:

<img src='/differentstatic/logo.png'>

It is always a good practice to use url_for to create URLs for static files rather than explicitly defining them, as follows:

<img src="{{ url_for('static', filename='logo.png') }}">