Skip to main content

Integrates Vite resources into a Django web site.

Project description

DjVite

djvite logo

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.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

djvite-1.5.0.tar.gz (11.0 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

djvite-1.5.0-py3-none-any.whl (8.5 kB view details)

Uploaded Python 3

File details

Details for the file djvite-1.5.0.tar.gz.

File metadata

  • Download URL: djvite-1.5.0.tar.gz
  • Upload date:
  • Size: 11.0 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: uv/0.9.16 {"installer":{"name":"uv","version":"0.9.16","subcommand":["publish"]},"python":null,"implementation":{"name":null,"version":null},"distro":{"name":"Alpine Linux","version":"3.23.0","id":null,"libc":null},"system":{"name":null,"release":null},"cpu":null,"openssl_version":null,"setuptools_version":null,"rustc_version":null,"ci":true}

File hashes

Hashes for djvite-1.5.0.tar.gz
Algorithm Hash digest
SHA256 d169d5d311748e467669cff402183974e26cd6b199f30802898d13d2d6d6c459
MD5 344e897fc7fbd59c2336aa5a39053cfc
BLAKE2b-256 65f1c7b0a24de32e472874ac9931f38ce5bc6aa7f611833c930f857c7be4261f

See more details on using hashes here.

File details

Details for the file djvite-1.5.0-py3-none-any.whl.

File metadata

  • Download URL: djvite-1.5.0-py3-none-any.whl
  • Upload date:
  • Size: 8.5 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: uv/0.9.16 {"installer":{"name":"uv","version":"0.9.16","subcommand":["publish"]},"python":null,"implementation":{"name":null,"version":null},"distro":{"name":"Alpine Linux","version":"3.23.0","id":null,"libc":null},"system":{"name":null,"release":null},"cpu":null,"openssl_version":null,"setuptools_version":null,"rustc_version":null,"ci":true}

File hashes

Hashes for djvite-1.5.0-py3-none-any.whl
Algorithm Hash digest
SHA256 c9db5b4fe9958acf85ae9a54bf1e4821b07fec47cbfe5b7b815651199c348cb0
MD5 a1334385948322ec1b8bb5c23ddaf9e8
BLAKE2b-256 d5d717c9eef7cf29dab42615f0f35420dd49edcdd4e9b606bfd7ea20bdfd2640

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page