Fix AddViteApp port configuration to use Aspire-assigned port (#724)

* Initial plan for issue

* Implement AddViteApp port configuration with command line arguments

Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com>

* Finalize AddViteApp port configuration and update example

Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com>

* Improving on Copilots take

* Keeping PORT on env vars

* Simplify AddViteApp port configuration by using vite.config.ts

Co-authored-by: davidfowl <95136+davidfowl@users.noreply.github.com>

* Simplifying the code

* Fixing test

* Reverting a copilot change

* Using an endpoint reference expression which is a better approach for getting the port

* Think we only need -- for npm, not other package managers

* Cleaning up using statements

* Remove automatic WithExternalHttpEndpoints from AddViteApp to let users decide

Co-authored-by: davidfowl <95136+davidfowl@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com>
Co-authored-by: Aaron Powell <me@aaron-powell.com>
Co-authored-by: davidfowl <95136+davidfowl@users.noreply.github.com>

Author: 3 people

examples/nodejs-ext/pnpm-demo/package.json

@@ -4,9 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "run-script-os",
-    "dev:windows": "vite dev --port %PORT%",
-    "dev:default": "vite dev --port $PORT",
+    "dev": "vite dev",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview"

examples/nodejs-ext/vite-demo/package.json

@@ -4,9 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "run-script-os",
-    "dev:windows": "vite dev --port %PORT%",
-    "dev:default": "vite dev --port $PORT",
+    "dev": "vite dev",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview"
@@ -30,3 +28,4 @@
     "vite": "^6.3.4"
   }
 }
+

examples/nodejs-ext/yarn-demo/package.json

@@ -4,9 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "run-script-os",
-    "dev:windows": "vite dev --port %PORT%",
-    "dev:default": "vite dev --port $PORT",
+    "dev": "vite dev",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview"
@@ -30,3 +28,4 @@
     "vite": "^6.3.4"
   }
 }
+

src/CommunityToolkit.Aspire.Hosting.NodeJS.Extensions/NodeJSHostingExtensions.cs

@@ -1,9 +1,9 @@
 using Aspire.Hosting.ApplicationModel;
 using Aspire.Hosting.Lifecycle;
 using CommunityToolkit.Aspire.Hosting.NodeJS.Extensions;
-using Microsoft.Extensions.Hosting;
-using Microsoft.Extensions.DependencyInjection;
 using CommunityToolkit.Aspire.Utils;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Hosting;
 
 namespace Aspire.Hosting;
 
@@ -37,9 +37,21 @@ public static IResourceBuilder<NodeAppResource> AddViteApp(this IDistributedAppl
             _ => builder.AddNpmApp(name, wd, "dev")
         };
 
-        return useHttps
-            ? resource.WithHttpsEndpoint(env: "PORT").WithExternalHttpEndpoints()
-            : resource.WithHttpEndpoint(env: "PORT").WithExternalHttpEndpoints();
+        _ = useHttps
+            ? resource.WithHttpsEndpoint(env: "PORT")
+            : resource.WithHttpEndpoint(env: "PORT");
+
+        return resource.WithArgs(ctx =>
+        {
+            if (packageManager == "npm")
+            {
+                ctx.Args.Add("--");
+            }
+
+            var targetEndpoint = resource.Resource.GetEndpoint(useHttps ? "https" : "http");
+            ctx.Args.Add("--port");
+            ctx.Args.Add(targetEndpoint.Property(EndpointProperty.TargetPort));
+        });
     }
 
     /// <summary>

tests/CommunityToolkit.Aspire.Hosting.NodeJS.Extensions.Tests/ResourceCreationTests.cs

@@ -1,6 +1,4 @@
 using Aspire.Hosting;
-using Microsoft.AspNetCore.Http;
-using System.Diagnostics;
 
 namespace CommunityToolkit.Aspire.Hosting.NodeJS.Extensions.Tests;
 
@@ -141,7 +139,7 @@ public void ViteAppHasExposedHttpsEndpoints()
 
 
     [Fact]
-    public void ViteAppHasExposedExternalHttpEndpoints()
+    public void ViteAppDoesNotExposeExternalHttpEndpointsByDefault()
     {
         var builder = DistributedApplication.CreateBuilder();
 
@@ -157,7 +155,7 @@ public void ViteAppHasExposedExternalHttpEndpoints()
 
         Assert.True(resource.TryGetAnnotationsOfType<EndpointAnnotation>(out var endpoints));
 
-        Assert.Contains(endpoints, e => e.IsExternal);
+        Assert.DoesNotContain(endpoints, e => e.IsExternal);
     }
 
     [Fact]
@@ -195,4 +193,36 @@ public void WithNpmPackageInstallationCanUseCICommand()
         var resource = Assert.Single(appModel.Resources.OfType<NodeAppResource>());
         Assert.Equal("npm", resource.Command);
     }
+
+    [Fact]
+    public void ViteAppConfiguresPortFromEnvironment()
+    {
+        var builder = DistributedApplication.CreateBuilder();
+
+        builder.AddViteApp("vite");
+
+        using var app = builder.Build();
+
+        var appModel = app.Services.GetRequiredService<DistributedApplicationModel>();
+
+        var resource = Assert.Single(appModel.Resources.OfType<NodeAppResource>());
+
+        // Verify that command line arguments callback is configured
+        Assert.True(resource.TryGetAnnotationsOfType<CommandLineArgsCallbackAnnotation>(out var argsCallbackAnnotations));
+        List<object> args = [];
+        var ctx = new CommandLineArgsCallbackContext(args);
+
+        foreach (var annotation in argsCallbackAnnotations)
+        {
+            annotation.Callback(ctx);
+        }
+
+        Assert.Collection(args,
+            arg => Assert.Equal("run", arg),
+            arg => Assert.Equal("dev", arg),
+            arg => Assert.Equal("--", arg),
+            arg => Assert.Equal("--port", arg),
+            arg => Assert.IsType<EndpointReferenceExpression>(arg)
+        );
+    }
 }