CODEWITHSUNDEEP
pythonflask
Johnny Metz
Johnny Metz

Reputation: 6035

Flask: where to put static javascript files in templates

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.

Upvotes: 15

Views: 31220

Answers (1)

deesolie
deesolie

Reputation: 1062

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.

Upvotes: 3

Related Questions