My Django Vite App

{"id":3465,"library":"django-vite","title":"Django Vite","description":"django-vite integrates Vite.js into Django projects, allowing for fast frontend development with Hot Module Replacement (HMR) and efficient production builds. It handles manifest file parsing and asset serving for both development and production environments. The current version is 3.1.0, with frequent patch releases and minor updates.","status":"active","version":"3.1.0","language":"en","source_language":"en","source_url":"https://github.com/MrBin99/django-vite","tags":["django","vite","frontend","build-tool","hmr","assets","static-files"],"install":[{"cmd":"pip install django-vite","lang":"bash","label":"Install with pip"}],"dependencies":[{"reason":"Required for framework integration.","package":"Django","optional":false}],"imports":[{"note":"Add 'django_vite' to your Django INSTALLED_APPS setting.","symbol":"DjangoViteConfig","correct":"INSTALLED_APPS = ['django_vite']"},{"note":"Used in Django templates to render Vite assets. Replace 'main.js' with your actual entry point.","symbol":"vite_asset","correct":"{% load django_vite %}\n{% vite_asset 'main.js' %}"},{"note":"Used in Django templates to inject the Vite HMR client script in development mode.","symbol":"vite_hmr_client","correct":"{% load django_vite %}\n{% vite_hmr_client %}"}],"quickstart":{"code":"import os\n\nBASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))\n\nINSTALLED_APPS = [\n # ... other apps\n 'django_vite',\n]\n\nSTATIC_URL = '/static/'\nSTATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') # For collectstatic\n\n# Vite configuration\nDJANGO_VITE = {\n 'default': {\n 'build_dir': os.path.join(BASE_DIR, 'static', '.vite'),\n 'manifest_path': os.path.join(BASE_DIR, 'static', '.vite', 'manifest.json'),\n 'dev_server_url': 'http://localhost:5173',\n 'static_url_prefix': '/static/', # Must match STATIC_URL for production\n }\n}\n\n# In your template (e.g., templates/base.html):\n# {% load django_vite %}\n# \n# \n# \n# \n# \n# My Django Vite App\n# {% vite_hmr_client %}\n# {% vite_asset 'src/main.js' %}\n# \n# \n#

\n# \n# ","lang":"python","description":"To integrate django-vite, first add 'django_vite' to `INSTALLED_APPS`. Then, configure `DJANGO_VITE` in your settings.py, specifying the `build_dir`, `manifest_path`, and `dev_server_url`. Ensure your Vite project builds its assets to the specified `build_dir`. Finally, include `{% vite_hmr_client %}` and `{% vite_asset 'your_entry_point.js' %}` in your Django templates."},"warnings":[{"fix":"Review the official documentation for the new `DJANGO_VITE` settings structure. For single-app setups, wrap your existing config in `DJANGO_VITE = { 'default': { ... } }`.","message":"The configuration format for `DJANGO_VITE` underwent a significant change in version 3.0.0 to support multi-app configurations. If upgrading from 2.x, existing single-app configurations might need to be wrapped in a 'default' key or adjusted for the new structure.","severity":"breaking","affected_versions":"3.0.0+"},{"fix":"Either update your Vite `vite.config.js` to use `server: { port: 5173 }` or set `DJANGO_VITE['default']['dev_server_url']` in Django settings to match your custom Vite dev server URL (e.g., `http://localhost:3000`).","message":"The default development server port changed from 3000 to 5173 in version 3.0.1 to align with Vite 3/4 defaults. Projects upgrading from versions prior to 3.0.1 that relied on the default port will need to update their Vite dev server configuration or explicitly set `DJANGO_VITE['default']['dev_server_port'] = 3000` (or your preferred port).","severity":"breaking","affected_versions":"3.0.1+"},{"fix":"Always explicitly define `DJANGO_VITE['default']['manifest_path']` (and for other apps if using multi-app config) to `os.path.join(BASE_DIR, 'your_vite_build_output_dir', 'manifest.json')`.","message":"The `manifest_path` is critical and must accurately point to the `manifest.json` file generated by Vite during the build process. The default may not match your project structure, leading to `FileNotFoundError` in production.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Ensure the `vite_hmr_client` tag is rendered in the `` section, prior to any scripts loaded via `vite_asset`.","message":"For Hot Module Replacement (HMR) to function correctly in development, the `{% vite_hmr_client %}` template tag must be placed *before* any `{% vite_asset %}` tags in your HTML.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Ensure your `STATICFILES_DIRS` or `STATIC_ROOT` configuration includes the Vite build output directory (e.g., `BASE_DIR / 'static' / '.vite'`) so that `collectstatic` can gather the `manifest.json` and other assets. You might also need to adjust `STATIC_URL` and `DJANGO_VITE['default']['static_url_prefix']` to match.","message":"When running `collectstatic` for deployment, Vite-built assets (including `manifest.json`) are typically not included by default. This can lead to production issues where `django-vite` cannot find its required manifest file.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-11T00:00:00.000Z","next_check":"2026-07-10T00:00:00.000Z"}