vite-impl-backend-integration

vite-impl-backend-integration

Quick Reference

When This Skill Applies

Use this skill when:

• Integrating Vite with a backend framework (Django, Laravel, Rails, Express, ASP.NET, etc.)
• Rendering Vite-built assets from server-side templates
• Setting up dev/production HTML serving for a non-SPA architecture
• Reading .vite/manifest.json to resolve hashed asset paths

Architecture Overview

Concern	Development	Production
Asset serving	Vite dev server (localhost:5173)	Static files from dist/
HTML generation	Backend injects Vite client + entry scripts	Backend reads manifest.json, renders tags
HMR	Automatic via @vite/client	N/A
CSS	Injected by Vite dev server	Extracted as separate files
Entry resolution	Direct source path	Hashed filename from manifest

Critical Warnings

NEVER omit import 'vite/modulepreload-polyfill' from your entry point -- without it, <link rel="modulepreload"> tags will not work in browsers that lack native support.

NEVER hardcode hashed filenames in production templates -- ALWAYS read .vite/manifest.json at runtime or build time. Hashed names change on every build.

NEVER serve the Vite dev server scripts in production -- ALWAYS use environment detection to switch between dev mode HTML and production manifest rendering.

NEVER omit the React preamble when using @vitejs/plugin-react with a backend -- HMR will silently fail without it.

ALWAYS set build.manifest: true in vite.config.ts when integrating with a backend framework.

ALWAYS set server.cors to allow your backend origin during development.

ALWAYS specify build.rollupOptions.input (Vite 6/7) or build.rolldownOptions.input (Vite 8+) to define your entry point explicitly.

---

Configuration

vite.config.ts (Backend Integration)

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    cors: {
      origin: 'http://my-backend.example.com',
    },
  },
  build: {
    manifest: true,
    // Vite 6/7:
    rollupOptions: {
      input: '/path/to/main.js',
    },
    // Vite 8+:
    // rolldownOptions: {
    //   input: '/path/to/main.js',
    // },
  },
})