Is the HttpEndpoint targetPort supposed to be randomly generated every time?

[DaelmanD]

Hi,

I've been trying to add aspire into an existing project I have. My problem is with adding a react frontend to the hosting setup.
My frontend defaults to port 4200, and I would like to not alter anything on that side.

When I try to add it to the hosting like this:

builder.AddNpmApp("my-project-frontend", "../../../client/")
    .WithReference(api)
    .WithEnvironment("BROWSER", "none")
    .WithHttpEndpoint(targetPort: 4200, env: "PORT")
    .WithExternalHttpEndpoints();

My target port is never used, instead the PORT environment variable is filled in with a random port number, and the dashboard shows this:

I would expect the target http port to be the one I supplied myself.

If I leave out env:"PORT", or I define the environment variable myself, I get an error saying there is not enough information to expose the service.
I can get it to work if I define it as .WithHttpEndpoint(4200, isProxied: false), but that doesn't explain why the targetPort doesn't seem to work the way I expect it to, so I thought I would ask here.

[timheuer]

targetPort is the internal container target port when container resources are used. For this you want to use port as you've done effectively in the second method you noted that works. Since you aren't using a container resource here, using port with your isProxied: false will give you the experience you want. Else, yes, the port is going to be different each run.

[karolz-ms]

That is not quite accurate, targetPort can be used with Executables as well, not just with Containers, and it should work like @DaelmanD described. EndpointPortsExecutableNotReplicatedProxiedNoPortTargetPortSet test (https://github.com/dotnet/aspire/blob/main/tests/Aspire.Hosting.Tests/Dcp/ApplicationExecutorTests.cs#L105) is supposed to verify this.

@DaelmanD would it be possible to share full repro/repro steps?

[DaelmanD]

I managed to reproduce it starting from the AspireWithJavascript sample.

So starting from the sample:

1. Edit line 11 and 12 of [...]\AspireJavaScript.React\package.json from "webpack-dev-server --mode development --hot --env PORT=%PORT%" to "webpack-dev-server --mode development --hot". This defaults the react app's port to 4001.
2. run npm install as described in the sample's readme
3. In AspireJavascript.AppHost\Program.cs, replace the existing .AddNpmApp setups with

builder.AddNpmApp("react", "../AspireJavaScript.React")
    .WithReference(weatherApi)
    .WithEnvironment("BROWSER", "none") // Disable opening browser on npm start
    .WithHttpEndpoint(targetPort: 4001, env: "PORT")
    .WithExternalHttpEndpoints();

With this setup I get the same behavior, targetPort in the dashboard is random while the react app is running on localhost:4001.

[davidfowl]

I am 89% sure this is fixed in main (8.1), but we shipped 8.0 with this.

[karolz-ms]

@davidfowl is correct. I was able to verify, using latest 8.1 preview https://github.com/dotnet/aspire/blob/main/docs/using-latest-daily.md that the same repro program that fails with 8.0 bits now works

[davidfowl]

cc @karolz-ms