or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

asset-loading.mdconfiguration.mdindex.mdtemplate-tags.md
tile.json

tessl/pypi-django-vite

Integration of Vite in a Django project.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
pypipkg:pypi/django-vite@3.1.x

To install, run

npx @tessl/cli install tessl/pypi-django-vite@3.1.0

index.mddocs/

Django Vite

Integration of ViteJS (a modern frontend build tool) and Django web framework, enabling developers to use Vite's fast development server, hot module replacement (HMR), and optimized production builds within Django projects.

Package Information

  • Package Name: django-vite
  • Package Type: Python library
  • Language: Python
  • Installation: pip install django-vite
  • Django Compatibility: Django 3.2+
  • Python Versions: 3.8, 3.9, 3.10, 3.11, 3.12

Core Imports

from django_vite import DjangoViteConfig

For Django template usage:

# In templates, load the template tags
{% load django_vite %}

For programmatic asset loading:

from django_vite.core.asset_loader import DjangoViteAssetLoader

For tag generation utilities:

from django_vite.core.tag_generator import TagGenerator, attrs_to_str

For exception handling:

from django_vite.core.exceptions import (
    DjangoViteManifestError,
    DjangoViteAssetNotFoundError,
    DjangoViteConfigNotFoundError
)

Basic Usage

Django Settings Configuration

# settings.py
INSTALLED_APPS = [
    # ... other apps
    'django_vite',
    # ... your apps that use django-vite
]

# Basic configuration
DJANGO_VITE = {
    "default": {
        "dev_mode": True,  # Set to False for production
        "dev_server_port": 5173,
        "static_url_prefix": "",
    }
}

Template Usage

<!-- templates/base.html -->
{% load django_vite %}
<!DOCTYPE html>
<html>
<head>
    <title>My Django App</title>
    <!-- Include Vite assets -->
    {% vite_asset 'src/main.js' %}
</head>
<body>
    <!-- HMR client for development -->
    {% vite_hmr_client %}
    
    <!-- React refresh for development -->
    {% vite_react_refresh %}
    
    <!-- Your content -->
</body>
</html>

Development vs Production

In development mode (dev_mode: True):

  • Assets are served from Vite development server
  • Hot Module Replacement (HMR) enabled
  • React refresh support
  • No manifest.json required

In production mode (dev_mode: False):

  • Assets served from Django static files
  • Reads manifest.json for asset dependencies
  • Generates optimized script and link tags
  • Supports legacy browser polyfills

Architecture

Django-vite follows a modular architecture:

  • DjangoViteAssetLoader: Singleton managing multiple app configurations
  • DjangoViteAppClient: Handles asset generation for individual Vite apps
  • ManifestClient: Parses and provides access to Vite's manifest.json
  • Template Tags: Django template integration layer
  • TagGenerator: HTML tag generation utilities

This design supports multi-app configurations where different parts of a Django project can use separate Vite configurations while sharing the same asset loading infrastructure.

Capabilities

Configuration Management

Configuration system supporting both single-app and multi-app Vite setups with development and production modes.

class DjangoViteConfig(NamedTuple):
    dev_mode: bool = False
    dev_server_protocol: str = "http"
    dev_server_host: str = "localhost"
    dev_server_port: int = 5173
    static_url_prefix: str = ""
    manifest_path: Optional[Union[Path, str]] = None
    legacy_polyfills_motif: str = "legacy-polyfills"
    ws_client_url: str = "@vite/client"
    react_refresh_url: str = "@react-refresh"
    app_client_class: str = "django_vite.core.asset_loader.DjangoViteAppClient"

Configuration

Template Tags

Django template tags for including Vite assets, HMR client, React refresh, and legacy browser support in templates.

def vite_asset(path: str, app: str = "default", **kwargs) -> str: ...
def vite_asset_url(path: str, app: str = "default") -> str: ...
def vite_preload_asset(path: str, app: str = "default") -> str: ...
def vite_hmr_client(app: str = "default", **kwargs) -> str: ...
def vite_react_refresh(app: str = "default", **kwargs) -> str: ...
def vite_legacy_polyfills(app: str = "default", nomodule: bool = True, **kwargs) -> str: ...
def vite_legacy_asset(path: str, app: str = "default", **kwargs) -> str: ...

Template Tags

Asset Loading

Core asset loading system with manifest parsing, URL generation, and programmatic asset management.

class DjangoViteAssetLoader:
    @classmethod
    def instance(cls) -> 'DjangoViteAssetLoader': ...
    def generate_vite_asset(self, path: str, app: str = "default", **kwargs) -> str: ...
    def generate_vite_asset_url(self, path: str, app: str = "default") -> str: ...
    def preload_vite_asset(self, path: str, app: str = "default") -> str: ...
    def check(self, **kwargs) -> List[Warning]: ...

class DjangoViteAppClient:
    def __init__(self, config: DjangoViteConfig, app_name: str = "default"): ...
    def generate_vite_asset(self, path: str, **kwargs) -> str: ...
    def get_dev_server_url(self, path: str) -> str: ...
    def get_production_server_url(self, path: str) -> str: ...

class ManifestClient:
    def __init__(self, config: DjangoViteConfig, app_name: str = "default"): ...
    def get(self, path: str) -> ManifestEntry: ...
    def check(self) -> List[Warning]: ...

Asset Loading

Tag Generation Utilities

Low-level HTML tag generation utilities used by the asset loading system.

class TagGenerator:
    @staticmethod
    def script(src: str, attrs: Dict[str, str]) -> str: ...
    @staticmethod
    def stylesheet(href: str, attrs: Optional[Dict[str, str]] = None) -> str: ...
    @staticmethod
    def stylesheet_preload(href: str, attrs: Optional[Dict[str, str]] = None) -> str: ...
    @staticmethod
    def preload(href: str, attrs: Dict[str, str]) -> str: ...

def attrs_to_str(attrs: Dict[str, str]) -> str: ...

Django App Configuration

Django app configuration and system checks for django-vite integration.

class DjangoViteAppConfig(AppConfig):
    name: str = "django_vite"
    verbose_name: str = "Django Vite"
    
    def ready(self) -> None: ...

def check_loader_instance(**kwargs) -> List[Warning]:
    """Django system check function for validating configurations."""

Exception Types

class DjangoViteManifestError(RuntimeError):
    """Manifest parsing failed."""

class DjangoViteAssetNotFoundError(RuntimeError):
    """Vite Asset could not be found."""

class DjangoViteConfigNotFoundError(RuntimeError):
    """DjangoViteConfig not found in DJANGO_VITE settings."""

Common Types

class ManifestEntry(NamedTuple):
    file: str
    src: Optional[str] = None
    isEntry: Optional[bool] = False
    isDynamicEntry: Optional[bool] = False
    css: Optional[List[str]] = []
    imports: Optional[List[str]] = []
    dynamicImports: Optional[List[str]] = []