21

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

I'm working with django and python.

Thanks in advance. Regards.

1
  • Are you mean load javascript files to a template? or you mean use the {{ STATIC_URL }}'s value in the javascript file? Commented Mar 6, 2012 at 1:52

3 Answers 3

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">';
Sign up to request clarification or add additional context in comments.

Comments

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.

4 Comments

This is a terrific suggestion! django-compressor is a cool project.
@slypete, yes it's amazing! Optimize file count, file size, and even add template variables. Brilliant. This is my latest huge django game changer.. what's next!?
I'm really liking this tool - one note is to install it using 'pip install django_compressor' rather than cloning it from github - took less that 10 minutes to set up. Only issue I had was to explicitly set 'COMPRESS_ENABLED = True' in my settings.py... as if you already have DEBUG = True from some other application, it will read that and not actually compress.
I've setup all the options, and the files are concatenated and compressed.The problem is that as soon as I add COMPRESS_JS_FILTERS to get this code working in JS files: {{ STATIC_URL|escapejs }} then the files are concatenated but not compressed anymore. What am I missing?
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 }}');

1 Comment

I was reading the docs and I didn't find this "STATICFILES_FINDERS" setting there. After I read your comment and added it, my app started working. Thanks!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.