Passing STATIC_URL to file javascript with django

Question

Which is the best solution to pass {{ STATIC_URL }} to javascript files?

I'm working with django and python.

Thanks in advance. Regards.

Answer 1

Using a global javascript variable with the static url value is more simple :

<script language="javascript">var STATIC_URL = "{{ STATIC_URL|escapejs }}";</script>
<script src="{{ STATIC_URL }}js/myfile.js"></script>

Then, you can simply use the static url by calling STATIC_URL in myfile.js :

html = '<img src="'+STATIC_URL+'/icons/flags/tn.gif">';

Answer 2

django-compressor lets you do this as well as optimize your site by condensing all of your required JS or CSS into one file and optimizing file size.

UPDATE: By default, compressor will convert relative urls into absolute urls using STATIC_URL . If you download the development version, it comes with a django template engine parser which lets you use all django template code directly in your CSS files, such as the {% static %} tag.

https://github.com/jezdez/django_compressor

Enable the TemplateFilter in settings.py after installing to parse your js or css files via the template engine.

COMPRESS_JS_FILTERS = [
    'compressor.filters.template.TemplateFilter',
]

Now any JS within {% compress js %} blocks will be parsed by the django template language...

{% compress js %}
    <script src="/my_script.js" type="text/javascript"></script>
{% endcompress %}

// my_script.js
alert('{{ STATIC_URL|escapejs }}');

You asked for the best way -- I think this is the best. Certainly better than serving dynamic files.

Answer 3

I think this complements the commentary of @Yuji 'Tomita' Tomita, as a full setup.

this worked for me.

This is how i did the full setup of django compressor for using STATIC_URL in django js file.

https://github.com/jezdez/django_compressor

pip install django_compressor

Add 'compressor' to your INSTALLED_APPS setting:

INSTALLED_APPS = (
    # other apps
    "compressor",
)

To test compression in Debug mode, in settings.py:

COMPRESS_ENABLED = True

In case you use Django's staticfiles contrib app (or its standalone counterpart django-staticfiles) you have to add Django Compressor's file finder to the STATICFILES_FINDERS setting, for example with django.contrib.staticfiles:

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    # other finders..
    'compressor.finders.CompressorFinder',
)

Enable the TemplateFilter in settings.py after installing to parse your js or css files via the template engine.

COMPRESS_JS_FILTERS = [
    'compressor.filters.template.TemplateFilter',
]

Now any JS within {% compress js %} blocks will be parsed by the django template language...

{% load compress %}

{% compress js %}
    <script src="/my_script.js" type="text/javascript"></script>
{% endcompress %}

// my_script.js

alert('{{ STATIC_URL|escapejs }}');