Installation

Vite.NET has two halves: a NuGet package for your ASP.NET Core app, and a Vite plugin for your SPA. This page installs both. If you are starting from scratch, the Quick Start walks through the whole project layout.

Note

This guide assumes you already have an ASP.NET Core project (Razor Pages or MVC) and a Vite SPA folder inside it (for example ReactApp/, created with npm create vite@latest).

1. Install the NuGet package

1. Add the package to your ASP.NET Core project

   dotnet add package TechGems.ViteDotNet

2. Register the integration in Program.cs

   using ViteDotNet;
   
   var builder = WebApplication.CreateBuilder(args);
   
   builder.Services.AddRazorPages();
   builder.Services.AddViteIntegration(builder.Configuration);

3. Register the tag helpers in _ViewImports.cshtml

   @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
   @addTagHelper *, ViteDotNet

2. Install the Vite plugin

1. Add the plugin to your SPA folder

   From inside your SPA directory (e.g. ReactApp/):

   npm install vite-dotnet

2. Register it in vite.config.ts

   Add the plugin after your framework plugin, passing your entrypoint and the id of the element the SPA mounts into:

   React

   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'),
     ],
   })

   Svelte

   import { defineConfig } from 'vite'
   import { svelte } from '@sveltejs/vite-plugin-svelte'
   import ViteDotNetPlugin from 'vite-dotnet'
   
   export default defineConfig({
     plugins: [
       svelte(),
       ViteDotNetPlugin('src/main.ts', 'app'),
     ],
   })

   Vue

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import ViteDotNetPlugin from 'vite-dotnet'
   
   export default defineConfig({
     plugins: [
       vue(),
       ViteDotNetPlugin('src/main.ts', 'app'),
     ],
   })

Plugin order matters

The Vite.NET plugin uses enforce: 'post', so it must be registered after your framework plugin. That is how it detects a React app (which needs an extra HMR preamble in development). See The Vite Plugin for details.

3. Point the back end at your app folder

Add the SPA’s directory name to your configuration under the ViteDotNet section. This is the only backend configuration required.

appsettings.Development.json

{
  "ViteDotNet": "ReactApp"
}

That’s it — everything else (entrypoint, container element id, dev-server port, whether the app is React) is generated by the plugin at dev-server start and build time. Continue to the Quick Start to render your SPA into a page.