# 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:

<figure><img src="/files/b6gxZj2ZjG9KE3KqVwyB" alt=""><figcaption><p>Project structure</p></figcaption></figure>

## Configuration

### Backend

#### Named Config

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

```json
"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.

```cshtml
@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:

```cshtml
@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:

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

#### Declarative Config

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

```cshtml
@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.

```typescript
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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://vite-dotnet.techgems.net/guide/advanced.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.