Skip to content

Project Architecture

Vite

Here's how Vite fits into this Django + HTMX project:

The big picture

Vite is the JS bundler — its only real job here is to take frontend/main.js (which imports htmx + the SSE extension) and turn it into one browser-ready file. The actual UI is server-rendered Django templates + HTMX partials; Vite never touches the HTML or CSS (those live in static/ and are served directly by Django/Caddy).

The pieces

  1. Entry point — frontend/main.js imports htmx and htmx-ext-sse from npm, then wires up the small amount of client-side behavior (dialog handling, view transitions, 400-swap fix). These npm packages are dependencies in package.json; Vite resolves and bundles them.

  2. Config — vite.config.js:

  3. base: "/static/" — built assets get /static/-prefixed URLs, matching Django's STATIC_URL
  4. build.outDir: "dist" with manifest: true — outputs dist/assets/main-.js plus dist/.vite/manifest.json mapping the source name to the hashed file

  5. input: "frontend/main.js" — the single entry

  6. django-vite bridge — base.html does {% load django_vite %}, then:

  7. {% vite_hmr_client %} — in dev, injects the Vite HMR client
  8. {% vite_asset "frontend/main.js" %} — emits the right