How To Use a Python Variable in an External Javascript (Django)

One way to use a Python variable in an external Javascript is to declare the JS variable in the HTML template through the context object, then pass this variable to the external script code :

<script type="text/javascript"> 
  js_var_from_dj = "{{ django_var }}";
</script>
<script src="{% static "js/js_file.js" %}" type="text/javascript"></script>

js_file.js :

function functionA(){ 
  //using the variable declared outside this js file
  inner_js_var = js_var_from_dj; 
}

What if instead of using an HTML template to pass the Django context variable, we inject the variable directly into the external Javascript code? 

This is actually possible, the trick here is to wrap the original JS file in a View, and use that view to render the JS file as a Django template.

Our js_file become :

function functionA(){
  //using the Django context variable
  inner_js_var = {{django_var}};
}

And the Django views.py :

def js_wrapper(request):
    django_var = "a message to js"
    context_for_js = {'django_var ': django_var}
    return render(request, 'path_to_template_folder/js_file.js', context_for_js ,"application/javascript")

We add the view to the URLs list :

urlpatterns = [
          path('js_wrapper.js', js_wrapper, name = "js_wrapper.js"), 
         ]

And finally, the external JS file would be declared like this:

<script src="{% static "js_wrapper.js" %}" type="text/javascript"></script>

Exploiting Javascript code as a Django template will potentially elevate client-side code capabilities.

A perfect use case is service worker where you want to set up a set of pages to be pre-cached dynamically, so to avoid hard-coded HTML links to those pages. You can define the list of pages, server-side, and send it to the service worker in a form of a list.

Let's say you want to preload web pages with their specifications for a given user, you can then define the view where you retrieve the product list :

def sw_workbox(request):
    product_list = Product.objects.filter(user=request.user)
    context = {'product_list': product_list}
    return render(request, 'sw_workbox.js', context,"application/javascript")

And then pass the pages links to precacheAndRoute()

workbox.precaching.precacheAndRoute([
  {% for product in product_list%}    
{url: '{% url 'your_app_name:productModel_change' product.id %}'},
{% endfor %}
});