Skip to main content

Integrates Vite resources into a Django web site.

Project description

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

  • Add djvite to your INSTALLED_APPS django config.
  • Define your static directories:
STATIC_URL = "static/"
STATIC_ROOT = BASE_DIR / 'static'
STATICFILES_DIRS = ['dist']
  • Load the djvite plugin into your templates:
<html>{% load djvite %}
...
</html>
  • Inject any script or link from vite into your template:
    • {% vite hotreload %} enables vite hot module reload in dev mode
    • {% vite '/src/main.js' %}
    • {% vite '/src/style.css' %}
  • Add DjVitePlugin to your vite.config.js file:
import { defineConfig } from 'vite'
import DjVitePlugin from 'djvite'
export default defineConfig({
  plugins: [DjVitePlugin({verbose: true})],
})

Notes:

You can add any attributes to the vite tag and it will be added to the final tags.

You can specifiy multiple sources within one vite tag, separate them with spaces.

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

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.4.3.tar.gz (10.8 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.4.3-py3-none-any.whl (8.3 kB view details)

Uploaded Python 3

File details

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

File metadata

  • Download URL: djvite-1.4.3.tar.gz
  • Upload date:
  • Size: 10.8 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: uv/0.7.22

File hashes

Hashes for djvite-1.4.3.tar.gz
Algorithm Hash digest
SHA256 c7390feb2fec485681cf683e60b8d02875ba7dd2867c4c14901850c8171ac606
MD5 c45eb56f404fcf540650d06ab876d8b4
BLAKE2b-256 bc1324898358dbe5d5287504d6b142ac597dc764c961e80e39d3b5321ce72799

See more details on using hashes here.

File details

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

File metadata

  • Download URL: djvite-1.4.3-py3-none-any.whl
  • Upload date:
  • Size: 8.3 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: uv/0.7.22

File hashes

Hashes for djvite-1.4.3-py3-none-any.whl
Algorithm Hash digest
SHA256 b8a603f1f400ce17eab4ee8de3d33b874bb5e3f70e247c3bd3e56b5200f14f85
MD5 12d16ffe1c996818864f0da98d805d2a
BLAKE2b-256 554ecc2166803760b212dd8328d54c4ce088afdafda36a348739d502cfad8ca0

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