Asset Resolver Reference
Reference for resolving page, layout, template, development-server, and production-manifest assets.
This page focuses on the practical details. Use the quick links below to move to the previous, next, or related docs.
HyperDjango automatically resolves assets compiled by Vite. The behavior differs based on whether the application is running in development or production.
Modes of Operation
The system detects the environment using is_dev_env() (typically based on DEBUG or HYPER_DEV settings).
Development Mode (HYPER_DEV=True or DEBUG=True)
In this mode, assets are served directly by the Vite development server.
- Resolver:
ViteDevServerAssetResolver - Behavior:
- Resolves imports to the Vite dev server URL (default:
http://localhost:5173/). - Returns a single
ModuleTagfor requested entries. - Vite handles all internal module resolution and HMR (Hot Module Replacement) automatically.
Production Mode (Manifest Mode)
In this mode, HyperDjango uses a pre-generated .vite/manifest.json file to map source entries to built asset files.
- Resolver:
ManifestAssetResolver - Behavior:
- Requires a successful Vite build (manifest must exist at
<output_dir>/.vite/manifest.json). - Resolves entries by looking up the key in the manifest.
- Returns a sequence of:
ModulePreloadTags for all transitive JS imports.StyleSheetTags for associated CSS.- The main
ModuleTagfor the entry point itself.
Manifest File Format
HyperDjango parses Vite's standard manifest JSON.
{
"src/entry.js": {
"file": "assets/entry-a1b2c3d4.js",
"src": "src/entry.js",
"isEntry": true,
"imports": ["src/lib.js"],
"css": ["assets/entry-e5f6g7h8.css"]
}
}
The resolver maps this to a ManifestEntry object containing:
- file: The final hashed filename.
- import_list: References to other JS files for preloading.
- css_list: CSS files to link.
Asset Tags
The system uses specific tag classes for rendering:
| Tag Type | HTML Output |
|---|---|
ModuleTag |
<script type="module" src="..."></script> |
StyleSheetTag |
<link rel="stylesheet" href="..."> |
ModulePreloadTag |
<link rel="modulepreload" href="..."> |