Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Aspire launches the client of a hosted Blazor WebAssembly app on a different random port every time the AppHost is launched #59860

Open
BenjaminCharlton opened this issue Jan 14, 2025 · 4 comments
Labels
area-blazor Includes: Blazor, Razor Components

Comments

@BenjaminCharlton
Copy link

BenjaminCharlton commented Jan 14, 2025

**EDIT: After researching the problem more extensively, I changed the title of this issue from "Question - how to know the URL assigned to a hosted Blazor WebAssembly app" to "Aspire launches the client of a hosted Blazor WebAssembly app on a different random port every time the AppHost is started".

The below is how my question was originally worded, but the root cause and the steps to reproduce are in my comment of 15th January.**

Some time ago, Bossman Dan Roth reported here, that the URL (e.g. localhost:xxxxx) of a hosted Blazor WebAssembly app "should be generated randomly by Visual Studio". That issue has been resolved and that's certainly what's happening on my machine. Perfect.

My question is, how can I determine what URL will be (or has been) assigned by Visual Studio, please?

I either need to control the URL (set it myself in launchSettings or my Aspire AppHost) or I need to read it (from either the Blazor server project or my Aspire AppHost) once it has been assigned by Visual Studio. I don't mind which.

The use case
My hosted Blazor WebAssembly app is a client of a Web API. The client's URL should get listed in the Web API's CORS configuration. For example (in the web API)

// Get a list of clients allowed to access the Web API.
var clients = builder.Configuration.GetSection("Clients").Get<string[]>() ?? [];
// Getting the URL of the Blazor server app was easy using existing Aspire features. Hopefully I can figure out how to get the Blazor WebAssembly app onto this list too.

builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(policy =>
    {
        policy.WithOrigins(clients); // Allow the list of clients to access the Web API
        policy.AllowAnyMethod();
        policy.WithHeaders("X-Requested-With");
        policy.AllowCredentials();
    });
});

I thought perhaps it could be set in the launchSettings.json file of the client app, like this:

{
  "profiles": {
    "Blazor.Client": {
      "commandName": "Project",
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7279;http://localhost:5279",
      "launchUrl": "https://localhost:7279/Counter",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

But the content of that file seems to be ignored by Visual Studio when launching a Blazor WebAssembly app. Can anybody point me in the correct direction please? How do I know the URL at which my Blazor WASM app is going to run early enough in the app lifecycle that I can add it as a client of the web API?

@dotnet-issue-labeler dotnet-issue-labeler bot added the area-blazor Includes: Blazor, Razor Components label Jan 14, 2025
@Bellarmine-Head
Copy link

Server project; Properties | launchSettings.json

Image

My question is, how can I determine what URL will be (or has been) assigned by Visual Studio, please?

Since it's random, you can't determine what it will be, before creating the solution.

In addition to looking in the Server project's launch settings file, how about just loading the solution into VS, hitting F5 and seeing what the URL is in the browser?

@BenjaminCharlton
Copy link
Author

BenjaminCharlton commented Jan 15, 2025

Good morning! And thanks for your interest, @Bellarmine-Head!

You might need to help me understand your second suggestion:

how about just loading the solution into VS, hitting F5 and seeing what the URL is in the browser?

If I see what the URL is in the browser, it will be too late to add the address as a client of the Web API. Besides, it will be different next time the app starts up. Maybe I didn't understand what you meant.

The first suggestion has got me thinking though:

Image

Your screenshot is the launchsettings.json is from a Blazor Server Project. If I could get the client to be run at the same URL as specified here, that would get me unstuck, but my WebAssembly client is being served at a different localhost port every time I boot up the app, no matter what I put in launchsettings.json. In another app, I see this working. Maybe that's the root cause of my problem.

I've been doing a bit more research into this today and I'm convinced it's something to do with Aspire. The client and server of a hosted blazor web app share the same localhost address. But if you add them to an Aspire project, the server app's address (taken from launchsettings.json) is no longer the same as the client's (which is randomly generated).

@Bellarmine-Head
Copy link

Bellarmine-Head commented Jan 15, 2025

Besides, it will be different next time the app starts up

No, it won't - or shouldn't be. The port number is randomly chosen by the New Project template... which is only run once.

Your screenshot is the launchsettings.json is from a Blazor Server Project.

My screenshot is from the Server project of a Blazor WebAssembly solution generated in 2020 (and modified manually in early 2024 to suit .NET 8), which has Client, Server and Shared projects, and no server-side rendering. Now, I grant you it's not easy to generate such a solution these days, what with the .NET 8's and 9's appalling new-project template.

The current new-project template won't give you a Shared project, won't properly identify the Server project as such (hint: it's the project that isn't the Client project), and won't show you how to get data to the client from the server. See here for the sad and sorry details.

but my WebAssembly client is being served at a different localhost port every time I boot up the app

Weird!

Maybe that's the root cause of my problem.

It is.

and I'm convinced it's something to do with Aspire

uh-oh

But if you add them to an Aspire project, the server app's address (taken from launchsettings.json) is no longer the same as the client's (which is randomly generated).

Sounds nuts. I've never used Aspire, and hopefully never will. For all my Blazor WebAssembly web apps, the localhost port is:-

  • set at the time of generating the new project (or more accurately: new solution)
  • doesn't change (although you can edit launchSettings if you want to change it)
  • used by both the Server and Client projects (i.e. used by the website as a whole)

@BenjaminCharlton
Copy link
Author

BenjaminCharlton commented Jan 15, 2025

Yep, it's something to do with Aspire for sure. (Incidentally, I'm rather enjoying playing with Aspire, but it isn't Blazor-friendly yet, it would seem). I'm sure because:

  1. If I create a new Blazor Web App with a Server and Client project, and leave the Server app as the startup project, it works fine (that is, it will be launched at the localhost port specified in launchsettings.json).
  2. If I then right-click on the server project and go to Add > .NET Aspire Orchestrator Support, I get an AppHost project now set as the startup project. Run that, and the Aspire dashboard shows the Blazor server project running at the correct localhost address from its launchsettings.json. However, the browser window that opens shows the app running on a random port that changes every time the project starts up.

That's the root cause.
By the way, I found your links very interesting and agree strongly with you and bossman Steve Sanderson on that!

@BenjaminCharlton BenjaminCharlton changed the title Question - how to know the URL assigned to a hosted Blazor WebAssembly app Aspire launches the client of a hosted Blazor WebAssembly app on a different random port every time the AppHost is launched Jan 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-blazor Includes: Blazor, Razor Components
Projects
None yet
Development

No branches or pull requests

2 participants