Migrating from v0 packages

The previous versions of the packages (v0) utilized more configuration and required the developer to keep said configuration synchronized.

The v0 versions of the packages rework how the front end and back end share configuration. The Vite plugin now emits manifest files that describe each app. With this, the backend only needs to know where the application is.

Tip

The previous documentation is still available. Use the v0 Docs link in the header, or go to v0.vite-dotnet.techgems.net.

What changed

Area	Before (v0)	Now
Backend config	Full per-app settings (entrypoint, container id, port, framework) in appsettings.json	Just the app directory name(s) under ViteDotNet
App identity	Configured explicitly	Derived from SPA configuration automatically
Dev/prod metadata	Backend config	manifest.dev.json / manifest.prod.json in wwwroot

Upgrade steps

1. Update the packages

Update the NuGet package and the Vite plugin to their latest versions:

dotnet add package TechGems.ViteDotNet

cd ReactApp && npm install vite-dotnet@latest

2. Add the plugin arguments

Pass your entrypoint and container element id to the plugin, and make sure it’s registered after your framework plugin:

vite.config.ts

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

3. Simplify your backend configuration

Replace the previous per-app configuration object with just the directory name(s):

appsettings.Development.json

{
  "ViteDotNet": "ReactApp"
}

or, for several apps:

{
  "ViteDotNet": [ "ReactApp", "SvelteApp" ]
}

4. Confirm the tag helpers

The tag helpers are <dev-vite-scripts> and <prod-vite-scripts>, selected by the app directory name via app-name (optional when only one app is configured):

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

Caution

Previously it was possible to provide an IntegrationConfig object directly to the tag helpers in the views. This option is no longer available, as we’re opting into a much simpler backend configuration that only needs the location to the app.

5. Rebuild

Run the dev server (npm run dev) or a production build (npm run build) so the plugin writes the new manifests into wwwroot. The back end reads them from there.

Caution

Delete any stale build output from the old layout before your first new build so old assets don’t linger in wwwroot.

Where to read more

• How It Works — the manifest-driven design.
• Backend Configuration — the simplified config section.
• The Vite Plugin — what the plugin derives and emits.