djvite

v1.5.0

Published

4 months ago

Integrates Vite resources into a Django web site.

0High
0Medium
0Low

cpontvieux

django vite javascript

DjVite

Integrates Vite resources into a Django web site.

Web requests are first served through vite dev server, then either proxified to django dev server or served directly.

This simulates a nginx proxy and wsgi server.

How to use

Django side

Add djvite to your INSTALLED_APPS django config and define your static directories.

# settings.py
INSTALLED_APPS = [
    ...
    'djvite',
]
STATIC_URL = "static/"
STATIC_ROOT = BASE_DIR / 'static'
STATICFILES_DIRS = ['dist']

Load the djvite plugin into your templates.
Inject any script or link from vite into your template:
- {% vite hotreload %} enables vite hot module reload in dev mode
- {% vite '/src/main.js' %} for module
- {% vite '/src/style.css' %} for asset
- Add any attributes to the vite tag and it will be added to the final tags.
- Specifiy multiple sources within one vite tag, separate them with spaces.

<!-- myapp/templates/index.html -->
<html>{% load djvite %}
  <heead>
    <title>My title</title>
    {% vite hotreload '/src/main.js' %}
  </head>
  ...
</html>

Notes:

You can use the get_nginx_config command to generate a working nginx static configuration.

Vite side

Add DjVitePlugin to your vite.config.js file:

// vite.config.js
import { defineConfig } from 'vite'
import DjVitePlugin from 'djvite'
export default defineConfig({
  plugins: [
    DjVitePlugin({verbose: true}),
  ],
})

Configuration

In django settings:

DJVITE dict, with the following keys:
- DEV_MODE (boolean, default True)
  When False, resources are resolved using the vite-manifest.json file that list bundle files. This file is generated using vite build.
- MODULE_EXTS (extension list, default ot ['.js'])
  Use this to provide other extensions to be served as module, for instance ['.js', '.ts', '.jsx', '.tsx'] in Typescript React application.
- VITE_MANIFEST_PATH (Path | str, default to vite.manifest.json)
  Location to search for the Vite manifest. Used when DEV_MODE is False.

In vite config plugin:

options object for DjVitePlugin.
- verbose default to false.
- djangoPort default to DJANGO_PORT environment variable or 8000 if not defined.
- djangoTemplatesGlob default to the globbing pattern **/templates.
- manifestPath default to vite.manifest.json.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

DjVite

How to use

Django side

Vite side

Configuration