JavaScript ES6 Tutorial for Django Developers

This JavaScript (ES6) tutorial is a part to a series of tutorials to teach Django developers front-end web development for creating modern full-stack applications.

Before starting the tutorial for the new JavaScript/ES6 features, we will first learn how to include JavaScript in a Django project.

JavaScript ES6 tutorial

There are two methods of integrating JavaScript with Django.

  • Separate Django (back-end) and JavaScript(front-end) apps which is convenient for building JavaScript-heavy apps with a Django RESTful back-end
  • Using JavaScript with Django built-in templates which is convenient for apps that don't need a complex JavaScript front-end

We've previously covered how to use the first approach with React, Vue and Angular examples. In this tutorial, we'll focus on the second approach.

We assume, you already have created a project. Check this tutorial if you need help!

Let's start by creating a Django HTML base template for your application (base.html):

<!DOCTYPE html>
<html lang="en">
<head>
  {% block title %}<title>Django JavaScript ES6 Tutorial</title>{% endblock %}
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
{% block body %} {% endblock %}
</body>
</html>

Adding JavaScript to Our Django Template

We can add JavaScript to our template using an inline <script> tag or an external JavaScript file. Let's create a app.js file, put it in a js folder that you need to create in the static folder of your application.

Next in the <head> tag of the template add:

{% load static %} 
<link rel="stylesheet" href="{% static 'js/app.js' %}">

We use the static template tag to specify the relative URL to the JS file.

Check Managing static files (e.g. images, JavaScript, CSS) for more information about static files in Django.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status