[Django]-Passing STATIC_URL to file javascript with django

21👍

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.

38👍

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">';

5👍

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 }}');

Leave a comment