Import javascript files with jinja from static folder [duplicate]

Answer 1

You can create and register a global function just doing that:

import os

app = Flask(__name__.split('.')[0])

@app.template_global()
def static_include(filename):
    fullpath = os.path.join(app.static_folder, filename)
    with open(fullpath, 'r') as f:
        return f.read()

And then you can include it like this (the safe-filter prevents quotes begin escaped):

{% block javascript %}
    <script type="text/javascript">
        {{ static_include("myscript.js") | safe }}
    </script>
{% endblock %}

Answer 2

Given a example directory structure that looks like this

app/static/css/bootstrap.min.css
app/static/js/bootstrap.min.js
app/templates/test_page.html
app/views
run_server

You can set the flask static_url_path when you create the app object

app = Flask(__name__, static_url_path='/static')

and then in test_page.html you can have something that looks like this

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

 I am an HTML body

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

While it's not required to set the static URL path, since what's shown above is the default, I want to show it because it's a feature I didn't know about for a long time and can be useful.

Answer 3

If you need to treat a file as a template, then it is not static. Put it in the templates folder and render it. If the file is not dynamic, then it is static. Put it in the static folder and link to it. There is no requirement that a given type of file must be a template or a static file. Pick whichever one is necessary.

On the other hand, it is probably better to keep JS static and pass arguments to it, rather than generating different code based on different input.