How to set up HTMX in Django

HTMX makes it absolutely easy and straightforward for a backed engineer like me to be able to efficiently write code from end to end without loosing quality and over engineering the front end, simple code and simple products I believe is a core indicator of success for any software system. The more you over engineer the less you focus on product functionality.
A client or user doesn't care whats beneath the hood, it just need to work and be fast. Modern web frameworks make a developers experience a bit gnarly.
So, this is my set up for the same:

I will assume your Django installation is up and running...
first install with pip and register the django_htmx library:

1. Install with pip:

python -m pip install django-htmx

1. Add django-htmx to your INSTALLED_APPS:

 INSTALLED_APPS = [
        ...,
        "django_htmx",
        ...,
    ]

1. Add the middleware we will use for htmx:

MIDDLEWARE = [
    ...,
    "django_htmx.middleware.HtmxMiddleware",
    ...,
]

Then after you'd set up the static files directory:

1. download the htmx.min.js here - https://unpkg.com/browse/htmx.org@1.9.12/dist/

2. Then put it in the static directory of your application. (Youd normally have this defined in your settings.py file). You can use whatever standard fits you e.g 'static/js/' etc.

3. Add the htmx script tag top your base template i.e:
   

{% load static %}
    <script src="{% static 'htmx.min.js' %}" defer></script>

After that you're set to go!

Additional Notes:
The purpose of installing django-htmx separately from pip is due to the following reasons :

1. Django-htmx comes installed with middleware (that adds request.htmx attribute to the views) that can help make it easier to handle requests from the client side of the application. It does this by checking if a request is coming as an htmx request then handling it appropriately.
2. It contains template tags that can be added globally to save time and adhere to the DRY(Dont Repeat Yourself) principle when dealing with Django templates.
3. It can also be used to bundle in a debug error handler to help catch errors as they occur either for debugging or any other purpose. You can load the debug handler as below:

{% load static %}
        <script src="{% static 'js/htmx/htmx.min.js' %}" defer></script>
        <!--Right under this-->
        <script src="{% static 'js/htmx/debug.js' %}" defer></script>

And a degub.js files would look like:

htmx.defineExtension('debug', {

    onEvent: function (name, evt) {

      if (console.debug) {

      console.debug(name, evt);

        } else if (console) {

         console.log("DEBUG:", name, evt);

    } else {

    throw "NO CONSOLE SUPPORTED"

    }

    }

});