Suggested Architecture for Your Project with Blazor Server and Angular Frontend Applications

Discover the best architecture for your project with `Blazor Server` and `Angular` applications using Entity Framework Core, Identity, and Mediatr. Learn the pros and cons of using a REST API for Blazor Server.
---
This video is based on the question https://stackoverflow.com/q/72083710/ asked by the user 'RBP' ( https://stackoverflow.com/u/13303389/ ) and on the answer https://stackoverflow.com/a/72176889/ provided by the user 'Geoffrey Fook' ( https://stackoverflow.com/u/7539820/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Suggested architecture for a project with 2 Frontend applications (Blazor Server and Angular) with EFCore, Identity, Mediatr

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Suggested Architecture for Your Project with Blazor Server and Angular Frontend Applications

When embarking on a software project, especially a school project, it's important to choose an architecture that promotes not only functionality but also maintainability and scalability. In this post, we will walk through the scenario of implementing a dual frontend setup involving Blazor Server for administration tasks and Angular for member interactions. We'll outline the architecture components and discuss the decision to use a REST API to facilitate communication in your application.

Project Architecture Overview

In the developed solution, you currently have a robust structure comprising the following components:

[[See Video to Reveal this Text or Code Snippet]]

Here is a quick overview of what each project does:

Project.MemberClient: The Angular application that serves members.

Project.AdminClient: The Blazor Server application for administrative tasks.

Project.Api: The REST API that manages requests from client applications.

Project.Application: Implements the CQRS pattern along with Mediatr.

Project.Core: Contains the entities and other core functionalities.

Project.Infrastructure: Manages database access and migrations.

Project.Test: Handles all the testing of your applications.

The Problem with API Utilization

You and your classmate seem to have differing opinions on whether both frontends should access the API or if the Blazor Server can directly communicate with the backend using Mediatr.

Valid Points from Both Sides

Your Classmate: Believes both clients should interact through the API for consistency and separation of concerns.

You: Argue that since the Blazor Server can access Mediatr directly, routing through an API may introduce unnecessary serialization/deserialization overhead.

Key Considerations

To conclude the discussion, let's address some essential areas that should influence your architectural decisions:

Hosting Configuration: Will the API and Blazor Server be hosted on the same server as your database?

Statelessness: Are you planning to maintain the stateless nature of APIs while developing the Blazor web app?

Scalability: How will you incorporate load balancing for both the API and Blazor web server?

Flexibility: Can you easily modify the overall design if the need arises?

Why Using a REST API is Recommended

Considering the above factors, filtering all requests through a REST API is often the better choice, for several key reasons:

Hosting Flexibility: You can host the Blazor application on one server and your database/API on another, allowing for better resource management.

Consistency: Developers working on the project will find it easier to conceptualize the application as a singular API, which simplifies the codebase.

Challenges with Load Balancing: Blazor Server applications use SignalR, making load balancing complex. Relying on an API simplifies this process.

Testing Simplification: If the Blazor functionality diverges from Angular, maintaining two separate servers can complicate testing. A single API reduces this complexity significantly.

Future Scalability: If you decide to migrate to Blazor Client instead of Blazor Server, this transition is far simpler when everything runs through a REST API.

Conclusion

In summary, while you can technically allow the Blazor Server to communicate directly with your backend, using a REST API introduces a more scalable and manageable architecture. By enforcing a structure that treats both the Angular and Blazor applications uniformly through an API, you not on

Видео Suggested Architecture for Your Project with Blazor Server and Angular Frontend Applications канала vlogize