django-htmx-alpine

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.