Vite Server

Start Express Server with Vite middleware. This server offers hot-reloading for static files and reloading for HTML (or similar) files. It uses Chokidar to detect changes to webpage files and WebSocket to send event notifications to the frontend.

Installation

Install this package as a global dependency.

yarn global add @django-vite/vite-server

and you can use this using Command Line Interface

django-vite-hmr # Start the Server

Reloading HTML

Inject Following JavaScript Code

const socket = new WebSocket("ws://localhost:5173/") // ws://server-host:server-port
socket.onmessage = (event) => {
    console.log(event)
    if (event.data === "reload") {
        window.location.reload()
    }
}

socket.onerror = (error) => {
    console.error("WebSocket error:", error)
}

// Event handler for when the WebSocket connection is closed
socket.onclose = () => {
    console.log("WebSocket connection closed")
}

Configuration

• vite.config.ts

  You can override Vite Config using vite.config.js or vite.config.ts

  // vite.config.ts
  import { defineConfig } from "vite"
  import path from "path"
  
  export default defineConfig({
      ...yourConfig,
  })

• chokidar.config.ts

  You can override Chokidar Config using chokidar.config.ts or chokidar.config.js

  TypeScript

  // chokidar.config.ts
  import { WatchOptions } from "chokidar"
  
  const options: WatchOptions & {
      paths: string | readonly string[]
  } = {}
  export default options

  JavaScript

  // chokidar.config.js
  import { WatchOptions } from "chokidar"
  
  /**
   * Override Chokidar Configuration
   *
   * @type {WatchOptions}
   * @property {string | readonly string[]} paths
   */
  const options = {}
  export default options

  Using docstring to provide typing.

Integration with Django

Documentation