ViteDotNetPlugin

npm: vite-dotnet Vite 3–8+

The default export of the vite-dotnet package. A Vite plugin factory that configures the build for ASP.NET Core and emits the manifests the back end reads.

Import

import ViteDotNetPlugin from 'vite-dotnet'

Signature

function ViteDotNetPlugin(
  entrypoint: string,
  containerElementId: string,
): Plugin

Parameter	Type	Description
entrypoint	string	Path to the app’s entry module, relative to the SPA folder (e.g. src/main.tsx).
containerElementId	string	The id of the DOM element the SPA mounts into (e.g. root).

Returns: a Vite Plugin object with enforce: 'post'.

Usage

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import ViteDotNetPlugin from 'vite-dotnet'

export default defineConfig({
  plugins: [
    react(),
    ViteDotNetPlugin('src/main.tsx', 'root'),
  ],
})

Caution

Register the plugin after your framework plugin. It uses enforce: 'post' and inspects the resolved plugin list to detect React, which requires the framework plugin to already be present.

What it configures

The plugin merges the following into your Vite config:

Config	Value	Why
build.outDir	../wwwroot/{appFolder}	Give each app its own folder inside the ASP.NET Core static-files directory.
build.emptyOutDir	true	Clean the app’s own output folder before each build, leaving other apps’ assets alone.
base (build only)	/{appFolder}/	Make urls the bundle resolves at runtime (dynamic import chunks, public/ files, url() in css) point at the app folder. Not applied in dev, where the dev server serves from its own root.
build.manifest	manifest.json	Vite’s manifest, at the root of the app’s output folder.
build.rollupOptions.input	entrypoint	Build from your entry module instead of an index.html.
build.rollupOptions.output	hashed names (e.g. main.[hash].js)	Flat names — the app folder is already the output directory.
server.ws / server.hmr	{ protocol: 'ws' }	Force plain-ws HMR so embedding in an HTTPS page doesn’t break the socket. The correct key is chosen for your Vite version.

Derived values

Value	How it’s derived
App folder name	The last segment of the current working directory (e.g. ReactApp).
isReact	true if the resolved plugins include vite:react-babel, vite:react-refresh, or vite:react-swc. Captured during configResolved.

Emitted files

File	When	Location	Contents
manifest.dev.json	Dev server starts listening	wwwroot/{appFolder}/	port, entrypoint, containerElementId, isReact
manifest.prod.json	vite build (generateBundle)	wwwroot/{appFolder}/	entrypoint, containerElementId, isReact

Types

export type PluginConfig = {
  entrypoint: string
  containerElementId: string
}