Issue in use of NpgsqlDataSource method and connecting UI with APP app with httpclient

[Amit-limbasiya]

I am trying out aspire and in my app I am using ADO.net npgsql client. For that I have added Npgsql package.
When I add the aspire project with this API project and tried to run the application It gives error as

Unhandled exception. System.InvalidOperationException: The service collection cannot be modified because it is read-only.
   at Microsoft.Extensions.DependencyInjection.ServiceCollection.ThrowReadOnlyException()
   at Microsoft.Extensions.DependencyInjection.ServiceCollection.System.Collections.Generic.ICollection<Microsoft.Extensions.DependencyInjection.ServiceDescriptor>.Add(ServiceDescriptor item)
   at Microsoft.Extensions.DependencyInjection.NpgsqlServiceCollectionExtensions.AddNpgsqlDataSourceCore(IServiceCollection serviceCollection, Object serviceKey, String connectionString, Action`1 dataSourceBuilderAction, ServiceLifetime connectionLifetime, ServiceLifetime dataSourceLifetime)
   at Microsoft.Extensions.DependencyInjection.NpgsqlServiceCollectionExtensions.AddNpgsqlDataSource(IServiceCollection serviceCollection, String connectionString, Action`1 dataSourceBuilderAction, ServiceLifetime connectionLifetime, ServiceLifetime dataSourceLifetime, Object serviceKey)
   at Microsoft.Extensions.Hosting.AspirePostgreSqlNpgsqlExtensions.RegisterNpgsqlServices(IHostApplicationBuilder builder, NpgsqlSettings settings, String configurationSectionName, String connectionName, Object serviceKey, Action`1 configureDataSourceBuilder) in /_/src/Components/Aspire.Npgsql/AspirePostgreSqlNpgsqlExtensions.cs:line 109
   at Microsoft.Extensions.Hosting.AspirePostgreSqlNpgsqlExtensions.AddNpgsqlDataSource(IHostApplicationBuilder builder, String configurationSectionName, Action`1 configureSettings, String connectionName, Object serviceKey, Action`1 configureDataSourceBuilder) in /_/src/Components/Aspire.Npgsql/AspirePostgreSqlNpgsqlExtensions.cs:line 71
   at Microsoft.Extensions.Hosting.AspirePostgreSqlNpgsqlExtensions.AddNpgsqlDataSource(IHostApplicationBuilder builder, String connectionName, Action`1 configureSettings, Action`1 configureDataSourceBuilder) in /_/src/Components/Aspire.Npgsql/AspirePostgreSqlNpgsqlExtensions.cs:line 35
   at password_manager_api.Program.Main(String[] args) in C:\Users\Amit Limbasiya\source\repos\Password_manager\password-manager-api\Program.cs:line 23

In the program.cs file where the error is pointing out I have added the NpgsqlDataSource with the aspire container as below:

builder.AddNpgsqlDataSource("postgres",s=>{ s.HealthChecks = false; s.Tracing = false; });
builder.Services.AddSingleton<DbOperations>();

I am using this NpgsqlDataSource in the DbOperations file where I got the instance of the NpgsqlDataSource with DI. And I have added DbOperations as a singleton service, after that I can get the instance of the DbOperations by DI in the API endpoints like below:
app.MapGet("/api/get-passwords", async (DbOperations dbOperations) =>.

AppHost Program.cs file:

var builder = DistributedApplication.CreateBuilder(args);

var postgres = builder.AddPostgres("pg")
    .AddDatabase("postgres");

var backend = builder.AddProject<Projects.Password_manager_API>("backend")
    .WithReference(postgres);

builder.AddProject<Projects.Password_manager_UI>("Password-Manager")
    .WithReference(backend);

builder.Build().Run();

I have added the postgres database and using this postgres in the AddNpgsqlDataSource method.

[davidfowl]

Unhandled exception. System.InvalidOperationException: The service collection cannot be modified because it is read-only.

This error is telling you that you are calling this method after building the application. You need to do it before.

[Amit-limbasiya]

Thanks @davidfowl. Able to solve it now.

[Amit-limbasiya]

Hii @davidfowl, Additionally I want to ask one more question, I am able to use the API and can connect with the database as well. But when I use the Application name "backend" in the endpoint request from the blazor UI app. It gets failed and stats the error as "No host found with name backend"
Please have a look at Apphost program.cs in above issue description.

I want to connect to API from the UI app. What will be the string to pass on in httpclient. Currently passing http://backend/api/get and getting error as no such host backend.

[davidfowl]

Are you service defaults wired up correctly? That's how service discovery works when you run locally:

https://learn.microsoft.com/en-us/dotnet/aspire/fundamentals/service-defaults#add-service-defaults-functionality

The HttpClientFactory is wired up the service discovery system, and the apphost provides the right configuration.

[Amit-limbasiya]

Yes it is same. Now If I want to use HttpClient, then how can I get the instance of the same in the ui app. I think the method AddServiceDefaults() will just configures the default httpclient for us, right? Now, if it has been configured then how to use it. How can I get the instance in the Razor Pages. I will have to tell UI app to discover for the instance from AppHost?

[davidfowl]

Now, if it has been configured then how to use it.

If you want to get an instance of an http client from DI then you can inject an HttpClient into your application and it should be configured. You can learn more about the HttpClientFactory here https://learn.microsoft.com/en-us/dotnet/core/extensions/httpclient-factory.

I will have to tell UI app to discover for the instance from AppHost?

The apphost you posted should be enough to make it work. Your "Password-Manager" project should be able to talk to the backend using "http://backend".

[Amit-limbasiya]

Thanks @davidfowl, Now the UI app is able to communicate with backend through IHttpClientFactory injection and creating the client.
Now I got two more errors, and was able to solve one.

• when the form submitted, app breaks and shows an error related to anti forgery token. Was able to solve it by adding component after form tag.
• When submit the form, the page gets reload and doesn't work like in standalone apps.
  Actually, I was working on the Standalone app and made working demo, After that, I wanted to tryout aspire. And didn't get the AddServiceDefault for the standalone app, The ServiceDefaults is an extension to the IHostApplicationBuilder and the standalone will have WebAssemblyHostBuilder. So it doesn't work with the blazor webapp.
  Now the project is same so I just copied the pages and navbar files to the blazor webapp. Now, after switching to blazor webapp these two remaining error occurs.

[Amit-limbasiya]

Update: Now I am able to prevent the page reload on submit form by adding @rendermode="InteractiveServer" to Routes and HeadOutlet tags in App.razor. It will prevent the page reloading on the component change and will then prevent the page reloading on the form submission.

[Amit-limbasiya]

Hii @davidfowl, I have a doubt that is the aspire compatible to complext apps? Like, let's assume a scenario where you have to manage multiple services like usually in eShop app whenever user place the order the inventory service should be activate to reduce the number of quantity. A scenario where I have multiple dbContexts.
Additionally is there any database tooling support in aspire, like Scaffolding database and so on. The aspire database packages supports database tooling like normal efcore packages do.

@goldytech

[davidfowl]

A scenario where I have multiple dbContexts.

I don't see why it wouldn't work. What's the doubt?

Additionally is there any database tooling support in aspire, like Scaffolding database and so on. The aspire database packages supports database tooling like normal efcore packages do.

No, you use the normal EF packages.

[goldytech]

@davidfowl As the Aspire solution can consist of multiple projects, can we assume it is geared toward monorepo structures?

[davidfowl]

There's an entire thread on multi-repo support #1137