HTMX Setup

Part 1, Chapter 4

« Django Setup


You've already learned a little about HTMX in the introduction, but in this chapter we'll take a deeper dive.

What is HTMX?

So, the idea behind HTMX is "JavaScript for people who don't want to use JavaScript". When using HTMX, you can easily achieve dynamic page rendering just by using a handful of HTMX-specific attributes directly in your HTML.

The attributes you'll most often find yourself using are:

  1. hx-get/hx-post/hx-put/hx-patch/hx-delete
    • Core HTMX attributes.
    • Used to issue a GET/POST/PUT/PATCH/DELETE HTTP requests.
  2. hx-trigger
    • Defines which event will trigger the AJAX request (e.g., click, mouseenter).
  3. hx-target
    • Defines where the response will be loaded (e.g., #shopping-list).
  4. hx-swap
    • Defines how the content will be added to the target (e.g., beforeend appends the content after the last child in the target element).

Let's take a look at a straightforward example:

This is a simple webpage that, upon clicking the button, prints out a random cat fact. Try it out.

As you can see, there's no code in the JS tab -- everything is achieved in the HTML tab. There's a lot of code due to basic HTML requirements, but the part we're actually interested in is the button:

<button hx-get="https://catfact.ninja/fact"
        hx-swap="innerHTML"
        hx-target="#catfact"
>

So:

  1. Clicking on the button will execute a GET request to the catfact.ninja API (hx-get="https://catfact.ninja/fact").
  2. The response will replace the HTML inside (hx-swap="innerHTML") the element with an ID of catfact (hx-target="#catfact").

Simply put, the content of the <div id="catfact"></div> element will be the content of the response.

Tip: innerHTML is the default value of the hx-swap; you don't necessarily need to define it.

Installation

Inside the party app, create a "static/party/js" directory:

(venv)$ cd party && mkdir -p static/party/js

Move to the "party/static/party/js" directory and download the minified HTMX:

(venv)$ cd static/party/js && curl https://unpkg.com/[email protected]/dist/htmx.min.js --output htmx.min.js

Modern JavaScript frameworks mostly advise against using public CDNs. See the HTMX docs or the Tailwind CSS docs for more info.

This is the directory structure that you should have:

├── .gitignore
├── core
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── manage.py
├── party
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── fixtures
│   │   ├── initial_gifts.json
│   │   ├── initial_guests.json
│   │   └── initial_parties.json
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   ├── 0002_party_guest_gift.py
│   │   └── __init__.py
│   ├── models.py
│   ├── tests
│   │   └── __init__.py
│   ├── static
│   │   └── party
│   │       └── js
│   │           └── htmx.min.js
│   ├── templates
│   │   └── party
│   │       └── base.html
│   └── views.py
├── pytest.ini
└── requirements.txt

Include HTMX into your base template:

<!--party/templates/party/base.html-->

{% load static %} <!--NEW-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Party!</title>
    <script type="text/javascript" src="{% static '/party/js/htmx.min.js' %}"></script> <!--NEW-->
</head>
<body>
<main>
    {% block content %}
    {% endblock %}
</main>
</body>
</html>

Commit and push the changes:

(venv)$ git add -A
(venv)$ git commit -m 'HTMX library added.'
(venv)$ git push -u origin main

What Have You Done?

You've added the HTMX library to your project. Since using HTMX with Django requires creation of multiple templates, URLs, and views, we won't play around with it in this chapter.

In the next chapter, we'll make our basic site prettier with Tailwind CSS.




« Django Setup

✓ Mark as Completed