Flask: where to put static javascript files in templates

Question

I’m developing a flask app with the following folder structure:

|-->flask_app.py
    |-->static
        |-->css
            |-->bootstrap.min.css
            |-->styles.css
        |-->js
            |-->jquery-3.1.1.min.js
            |-->bootstrap.min.js
            |-->script.js
    |-->templates
        |-->index.html

What is the proper way to link to these css and js files in index.html and what parameters do I need associated with them?

My CSS links look like this and are located in the header:

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

And my JS links look like this and are located at the end of the body tag:

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

Is this the correct syntax? Are they located in the correct spots in my templates (I’m sure there’s flexibility here)? And are there any other parameters I should pass in (e.g. type=”text/css”, type=”text/javascript”, media=”screen”)?

Everything is working as expected but I want to follow recommended practice if there is any.

Asked By: Johnny Metz

||

Source

Answer 1

As the Flask documentation mentions, you should store .css and .js files within your static folder and for organizational purposes, its fine to have each type of file as subdirectories (especially as your app grows).

Per this SO answer, you don’t need to have type=”text/css” or type=”text/javascript” in the jinja expression.

Answered By: deesolie

Flask: where to put static javascript files in templates

Question:

Answers: