AddViteApp should read the Vite port from config and set that as the HttpEndpoint

[maddymontaquila]

Describe the bug

when you use AddViteApp, it does "WithHttpEndpoint" under the hood but doesn't wire it up to anything, meaning you have to have a separate named endpoint with the targetport as 5173 (Vite's default). We should read that from the Vite runtime config and set it as part of AddViteApp.

Related #696

Regression

No response

Steps to reproduce

var frontend = builder.AddViteApp("frontend", "../frontend", packageManager: "pnpm")
    .WithPnpmPackageInstallation()
    .WithReference(ratingsApi);

That won't work without manually navigating to localhost:5173

var frontend = builder.AddViteApp("frontend", "../frontend", packageManager: "pnpm")
    .WithPnpmPackageInstallation()
    .WithReference(ratingsApi)
    .WithHttpEndpoint(targetPort: 5173);

That won't work because "http" endpoint is allocated in AddViteApp

var frontend = builder.AddViteApp("frontend", "../frontend", packageManager: "pnpm")
    .WithPnpmPackageInstallation()
    .WithReference(ratingsApi)
    .WithHttpEndpoint(name: "frontend", targetPort: 5173);
This works but as the secondary url which is annoying

Expected behavior

Aspire should assign a port that auto proxies to 5173 (or whatever Vite sets at runtime)

Screenshots

No response

IDE and version

Other

IDE version

VS Code

Nuget packages

CommunityToolkit.Aspire.Hosting.NodeJSExtensions

Additional context

No response

Help us help you

Yes, I'd like to be assigned to work on this item

[aaronpowell]

The main reason that we delegate to a random port in DCP is so that we avoid port collisions, as Vite's default behaviour is that it will cycle to the next available port. This would result in ambiguity on what port is bound.

I think a more ideal solution would be that the AddViteApp will append the argument to specify the port, rather than requiring you to edit the package.json to read it. This way there's no custom behaviour in the package.json to respect the random port, but we also avoid port collisions.