A sandbox for using Django with HTMX and Alpine.JS

  • By null
  • Last update: Jan 7, 2023
  • Comments: 0


This project is just a basic todo list.

However, it is made using a combination of Django, Alpine.JS and HTMX, and shows how you can get the reactivity of a frontend JS framework without sacrificing the benefits of your server-side framework (Session authentication, templating, etc).

A live demo can be seen here.

Setup Instructions

  • Create a virtualenv and install the required dependencies

    • Using Poetry (recommended):
      • Create a virtualenv and install the required dependencies
        • Dev/Testing environment: poetry install
        • Production environment: poetry install --no-dev
      • Activate the virtualenv
        • poetry shell
    • Using virtualenvwrapper:
      • Create a new virtualenv
        • mkvirtualenv django-htmx-alpine
      • Activate the virtualenv
        • workon django-htmx-alpine -or- source ~/[your_virtualenv_dir]/bin/activate
      • From the project's root folder (django_htmx_alpine), install the required dependencies
        • pip install -r requirements.txt
    • Running tests
      • From the project's root folder, run npm install.
      • To run unit tests, run npm run jest.
      • To run e2e tests, run npm run cypress.
  • (optional) You can generate a new secret key from the Django shell (manage.py shell) and set it as the SECRET_KEY in settings.py: from django.core.management import utils print(utils.get_random_secret_key())

  • Run manage.py migrate to generate a database.

  • Run manage.py runserver to start the development server

  • If you want the HTMX weather demo to work, update settings.WEATHER_API_KEY with an API key from OpenWeather using the 'Current Weather Data' API.