To get going, you’ll need to install htmx somehow into your template.
Most likely, you’ll want to put it into a base template. There are lots of
options for the exact details of how to do this in Django (depending on if you
are using bundlers for your static assets etc.), but the simplest is like one
of the following in your base.html
template (or whatever you have called it):
Using the CDN:
<html>
<head>
<script defer src="https://unpkg.com/[email protected]" integrity="sha384-zUfuhFKKZCbHTY6aRR46gxiqszMk5tcHjsVFxnUo8VMus4kHGVdIYVbOYYNlKmHV" crossorigin="anonymous"></script>
...
(You should specify the version you want, see htmx installation docs)
Or, download the htmx.min.js
into one of your folders for static assets in
your Django projects, and use like
this in your base.html
:
{% load static %}
<html lang="en">
<head>
<script defer src="{% static 'js/htmx.min.js' %}"></script>
I normally include the version number in the file name when I do this.
You can use bundlers like webpack etc. I usually use django-compressor, so my template ends up looking like:
{% compress js %}
<script type="text/javascript" defer src="{% static "js/htmx.min.js" %}"></script>
<script type="text/javascript" defer src="{% static "js/mystuff.js" %}"></script>
{% endcompress %}
Note the use of defer
(see the docs on script async/defer). By bundling my own code with htmx, and putting it after it, I know that htmx will have loaded before my own code executes, in case I need to use the htmx Javascript API. In development I set COMPRESS_ENABLED to True
. To aid debugging, I don’t run minify filters in development, and use unminified 3rd party libs if necessary.
You should also see the notes about post requests for things you might want in your base templates.