Running a Vite Frontend from .NET Aspire

One of the nicest features of .NET Aspire is that it can orchestrate not just APIs and databases, but also frontends.
That means your backend, frontend, and supporting infrastructure can all be started with a single dotnet run — no separate terminal tabs, npm installs, or manual steps.

Let’s look at a minimal example where Aspire runs a Vite dev server directly from your project.

Folder Layout

Here’s the structure we’ll use:

03_ViteApps/
├─ AppHost.cs
├─ ViteApps.csproj
├─ appsettings.json
├─ appsettings.Development.json
└─ my-vite-app-npm/        # Vite project (package.json, src, index.html)

The .NET Aspire project (AppHost.cs) lives at the root, and your Vite app sits inside my-vite-app-npm/.

AppHost.cs

Here’s all the code you need:

var builder = DistributedApplication.CreateBuilder(args);

// Option A: generic NPM app
/*
builder.AddNpmApp(
        name: "frontend",
        workingDirectory: "./my-vite-app-npm",
        scriptName: "dev")
    .WithNpmPackageInstallation()
    .WithExternalHttpEndpoints();
*/

// Option B: built-in Vite helper (simpler)
builder.AddViteApp("frontend", "./my-vite-app-npm")
    .WithNpmPackageInstallation()
    .WithExternalHttpEndpoints();

builder. Build().Run();

What’s Happening

Let’s break this down:

• AddViteApp("frontend", "./my-vite-app-npm")
  Registers a Vite app as a managed Aspire component. When you run the AppHost, Aspire automatically launches npm run dev inside that folder.
• WithNpmPackageInstallation()
  Ensures dependencies are installed. If node_modules doesn’t exist, Aspire will run npm install for you.
• WithExternalHttpEndpoints()
  Exposes your frontend so you can open it from the Aspire dashboard or access it directly in the browser.

Together, this means:
→ One dotnet run starts your backend, your database, and your Vite dev server — fully wired together in Aspire’s orchestration environment.

Running It

Simply execute:

cd 03_ViteApps
dotnet run

Aspire will boot up and show your frontend component in the dashboard.
Click on it to open the Vite dev server in your browser.

Why This Matters

This simple setup highlights what makes Aspire great:

• Unified lifecycle: backend + frontend start together
• No manual npm steps — Aspire automates them
• Everything visible in one dashboard
• Perfect for local development and containerized environments

With a few lines of C#, your entire distributed app — including your JavaScript frontend — runs as one coherent system.
No shell scripts, no complex Docker Compose tricks — just pure, declarative .NET simplicity.

[Source code]

That’s all folks!

Cheers!
Gašper Rupnik

{End.}