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_url_path on the application object. This can be modified as follows:

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

Now, to render the static file, we will 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') }}"> 

We will see more of this in the upcoming chapters.