How to set up HTMX in Django

Agar Joshua — Thu, 16 May 2024 20:57:00 +0000

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:

Install with pip:

python -m pip install django-htmx

Add django-htmx to your INSTALLED_APPS:

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

Add the middleware we will use for htmx:

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

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

download the htmx.min.js here - https://unpkg.com/browse/htmx.org@1.9.12/dist/
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.
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 :

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.
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.
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"

    }

    }

});

How to set up .env files in Django

Agar Joshua — Mon, 06 May 2024 06:41:50 +0000

Many resources can be unclear when explaining how to set up environment variables in Django with '.env' files. Here's a straightforward guide:

Download the Python Dotenv library:

pip install python-dotenv

Add or edit your '.env' file:

ENV_KEY = "your-key-goes-here"

Import it in your specific file(The file you want to include your '.env' file values):

import os
from django.core.exceptions import ImproperConfigError
from django.views import View

#Import load_dotenv module
from dotenv import load_dotenv

class KeyValueView(View):
    def get(self, request):
        """
        Gets a key value from the .env file.

        Raises:
            ImproperConfigError: If the ENV_KEY environment variable is not set.
        """

        # Load the dotenv function
        load_dotenv()

        try:
            # Your key is imported here like so...
            key = os.environ.get('ENV_KEY')
            if not key:
                raise ImproperConfigError("You must set the ENV_KEY environment variable.")
            value = os.getenv(key)
            return render(request, 'your_template.html', {'key': key, 'value': value})
        except ImproperConfigError as e:
            return HttpResponseBadRequest(str(e))

Note:

Don't commit or deploy your '.env' file - (that goes without saying) you will compromise the security of your site if you do.
Your '.env' file should be in your root directory. i.e

DEV Community: Agar Joshua

How to set up HTMX in Django

How to set up .env files in Django

Note: