Overview

Vite.NET is an ASP.NET Core library that integrates Vite SPAs with Razor Pages and MVC views. Instead of hosting your front end on a separate Node server and wiring up CORS, proxies, and a second deployment, your SPA is built by Vite and served directly by your .NET application.

It is the .NET analogue to integrations like Vite Ruby or the Laravel Vite plugin. It works with React, Svelte, Vue, and Solid.

Why integrate Vite with ASP.NET Core?

Shared authentication

The SPA is served by your .NET app, so it lives behind the same cookies, auth, and middleware as every other page.

Shared static assets

Vite writes its build output into wwwroot, so the SPA’s assets are served by the same static-file pipeline as the rest of your site.

Micro-frontends

Mount one SPA per page, or several SPAs across different pages, all inside one host — no Node micro-service mesh required.

A great dev experience

In development you get Vite’s dev server and hot module replacement; in production you get hashed, optimized bundles.

The two packages

Vite.NET ships as a pair that work together:

Package	Where	Purpose
TechGems.ViteDotNet	NuGet (your ASP.NET Core app)	Registers the integration and provides the tag helpers that render your SPA into a Razor page.
vite-dotnet	NPM (your SPA folder inside an ASP.NET Core app)	A Vite plugin that shapes the build output and emits the manifests the back end reads.

How the pieces connect

The key idea in this version of Vite.NET is that the front end describes itself to the back end. You no longer duplicate the entrypoint, container element id, or port in your appsettings.json. Instead:

1. The Vite plugin knows your entrypoint and containerElementId (you pass them when you register it) and detects whether the app is React.
2. At dev-server start and at build time, the plugin writes small manifest files into wwwroot describing the app.
3. The back end reads those manifests. Its only configuration is the directory name of each integrated app.

ReactApp/vite.config.ts        appsettings: "ViteDotNet": "ReactApp"
        │                                          │
        │  ViteDotNetPlugin("src/main.tsx",        │  reads manifests from
        │                   "root")                 │  wwwroot/ReactApp/
        ▼                                          ▼
  manifest.dev.json  ─────────────────────►  <dev-vite-scripts>   (development)
  manifest.prod.json ─────────────────────►  <prod-vite-scripts>  (production)

Where to go next

• Installation — add both packages to an existing project.
• Quick Start — a full walkthrough from empty page to running SPA.
• How It Works — the manifests and rendering flow in depth.

Tip

Looking for the documentation of the previous release? Use the v0 Docs link in the site header, or go directly to v0.vite-dotnet.techgems.net.