# Django-And-HTMX
This project demonstrates a seamless integration between Django, a powerful Python web framework, and HTMX, a lightweight JavaScript framework that enables server-driven, interactive web experiences.
# Work With This Project
Prerequisites:
- Python (version 3.6 or later recommended)
- pip (Python package installer)
- A code editor or IDE of your choice
- A GitHub account (optional, but recommended for version control)
1. Initialize a virtual environment
pip install virtualenv
python -m venv venv
source venv/bin/activatepip install virtualenv
python -m venv venv
venv\Scripts\activate.bat2. Install Requirements:
-
Install all requirements using pip:
pip install -r requirements.txt
# Create And Setup Your Own Project
Prerequisites:
- Python (version 3.6 or later recommended)
- pip (Python package installer)
- A code editor or IDE of your choice
- A GitHub account (optional, but recommended for version control)
1. Project Setup:
-
Create a new directory for your project:
mkdir django-htmx-project cd django-htmx-project -
Initialize a virtual environment (recommended for managing project dependencies):
pip install virtualenv python -m venv venv source venv/bin/activatepip install virtualenv python -m venv venv venv\Scripts\activate.bat
2. Install Requirements:
-
Install all requirements using pip:
pip install django pip install asgiref pip install django-htmx pip install sqlparse
-
Generate a new Django project:
django-admin startproject mysite cd mysite
3. Create an App (Optional):
-
If you plan to have dedicated HTMX components, create a new Django app:
python manage.py startapp myapp
-
Add the app to
INSTALLED_APPSinmysite/settings.py:INSTALLED_APPS = [ # ... other apps 'myapp', 'django_htmx', ]
4. Configure Static Files:
-
Add HTMX's static files to your Django project's static directory:
mkdir mysite/static/htmx cp -r <path_to_htmx_static>/dist/* mysite/static/htmx/
- Replace
<path_to_htmx_static>with the actual path to HTMX's static files. You can usually find it in thenode_modules/htmx.org/distdirectory of your project's virtual environment.
- Replace
-
Go to this link and copy the all code which will be dispaly on the browser screen and and paste it in the htmx.min.js file and htmx.min.js file should be here mysite/static/htmx/:
https://unpkg.com/htmx.org@2.0.1/dist/htmx.min.js
-
Add these lines to
STATICFILESinmysite/settings.py:STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ]
-
Configure static file serving (optional for development):
MIDDLEWARE = [ # ... other middleware 'django_htmx.middleware.HtmxMiddleware', ]
5. Create a Template with HTMX Integration:
-
Create a new template file (e.g.,
mysite/templates/myapp/index.html):<!DOCTYPE html> <html> <head> <title>Django-HTMX Example</title> <link rel="stylesheet" href="{% static 'css/style.css' %}"> <script src="{% static 'htmx/htmx.min.js' %}"></script> </head> <body> <h1>Django and HTMX</h1> <button hx-get="/data" hx-target="#data-container">Get Data</button> <div id="data-container"></div> <script> // Add any custom JavaScript logic here </script> </body> </html>
-
Explanation:
- Include HTMX's JavaScript file (
htmx.min.js). - Add HTMX attributes:
hx-get: Fetches data from the specified URL.hx-target: Updates the target HTML element with the fetched data.- Explore other HTMX attributes for various interactive functionalities.
- Include HTMX's JavaScript file (
6. Create a View to Handle HTMX Requests:
-
Create a view function in your app's
views.py(ormysite/views.pyif not using an app):from django.http import JsonResponse def get_data(request): data = {'message': 'Hello from Django!'} # Replace with your desired data return JsonResponse(data)
-
Explanation:
- This view returns a JSON response when the button is clicked using HTMX.
Running the Project:
- Run migrations