Advanced

This section exists to explain how to allow multiple Vite apps to run in the same ASP.NET Core application. This implies only changes to how the config is set up and requires no changes to how front ends are usually set up.

The only important distinction is that you will need more than one Vite app in your ASP.NET Core project to set this up. It should look like this:

Project structure

Configuration

Backend

Named Config

For a setup like the previous one, your config will need to look like this:

"ViteDotNet": {
  "ClientApp": {
    "Entrypoint": "src/main.ts",
    "IsReact": false,
    "RootDirectory": "SvelteApp",
    "Port": 5173,
    "ContainerElementId": "app"
  },
  "ReactApp": {
    "Entrypoint": "src/main.tsx",
    "IsReact": true,
    "RootDirectory": "ReactApp",
    "Port": 5174,
    "ContainerElementId": "root"
  }
}

You will also need two Razor pages and the way that the apps will be rendered will be a little different.

@page
@model ReactModel

<dev-vite-scripts app-name="ReactApp" /> @*Feel free to use <prod-vite-scripts /> as well.*@

When using a named config, you will need to specify that you are doing so with the app-name parameter.

The same is necessary with the Svelte.cshtml page:

@page
@model SvelteModel

<dev-vite-scripts app-name="SvelteApp"/>

In Program.cs, if you want to run both dev vite servers at once you will need to do tell the app like this:

app.RunViteDevServer("./SvelteApp");
app.RunViteDevServer("./ReactApp");

Declarative Config

There is another option for configuring declaratively without relying on config settings.

@page
@model dotnet_vite.Pages.ReactModel
@using ViteDotNet;
@{
    Layout = null;

    var config = new IntegrationConfigModel()
    {
        ContainerElementId = "root",
        IsReact = true,
        Entrypoint = "src/app.tsx",
        Port = 5173,
        RootDirectory = "ReactApp"
    };
}

<dev-vite-scripts integration-config="config" />

By using an integration config object, the tag helper will use that instead of anything that could be in appsettings.json.

Front end

Just like for the backend, the front end plugin has a few customizable values that can be used in case you need to override defaults.

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(), 
    ViteDotNet(
      "src/main.tsx", //Entrypoint, always required
      5174,           //Port, default is 5173.
      "ReactApp"      //Container folder, default is "ClientApp"
    )
  ],
})

The overriding of these values is necessary every time you need to host more than one Vite application in your ASP.NET Core site. Always make sure that config values in both backend and front end match, as it is necessary for the integration to work correctly.