Build Scalable Web Apps and APIs with ASP.NET Core, Blazor, Angular for Modern Web Apps
I’m starting this discussion because many developers today need guidance on how to build modern, scalable web applications and APIs by combining ASP.NET Core, Blazor, and Angular—three powerful technologies within the .NET ecosystem. Whether you're focused on server-side development, creating dynamic client-side apps, or integrating both, these frameworks provide incredible capabilities to enhance your projects ASP.NET Core for API Development: ASP.NET Core is a robust, high-performance framework that allows you to create powerful APIs. Some of the best practices we’ll cover include: - Designing RESTful APIs with ASP.NET Core - Utilizing Entity Framework Core for efficient database access - Securing APIs with JWT and OAuth - Handling asynchronous requests for optimal performance - Implementing API versioning and changes over time Building Dynamic Web Apps with Blazor: Blazor enables you to create interactive web applications using C# instead of JavaScript. We will discuss: - Blazor Web Assembly vs. Blazor Server: Differences and use cases - Creating reusable Blazor components for UI - Integrating third-party JavaScript libraries with Blazor - Using SignalR for real-time features - Optimizing Blazor for performance Angular for Full-Featured Client-Side Development: Angular is a powerful, full-featured front-end framework that excels in creating dynamic and complex user interfaces. In this section, we'll dive into: - Why you might choose Angular over Blazor in certain cases - Using Angular CLI to scaffold, build, and maintain apps - Managing state in Angular with NgRx or RxJS - Connecting Angular with ASP.NET Core APIs for data handling - Working with Angular components, services, and routing for a seamless user experience Combining Angular and Blazor in a Single Application: You may have use cases where you want to combine both Blazor and Angular in one application to leverage the strengths of each framework: - When to use Angular for complex frontend features (e.g., dynamic forms, complex data visualization) and Blazor for simpler components or backend-heavy apps. - Managing communication between Angular and Blazor components in a single page (e.g., using - JavaScript Interop to pass data between the two). - Handling authentication and state management across both frameworks. Integration between Frontend (Blazor/Angular) and Backend (ASP.NET Core): No matter whether you're using Angular or Blazor for the frontend, integrating these with your backend API is key. We'll discuss: - Setting up HttpClient for making API calls from both Blazor and Angular - Working with SignalR to enable real-time features in both frontends - Managing authentication and authorization across both Angular and Blazor (JWT, OAuth) - Best practices for passing data and sharing state between the frontend and backend Scalable and Maintainable Web Apps: When building full-stack web applications, it's important to focus on scalability and maintainability. Here are some practices for achieving this: - Structuring your application code to separate concerns (e.g., services, components, repositories) - Utilizing Dependency Injection for flexible and testable code - Modularizing your codebase for easier updates and maintenance - Using Lazy Loading for Angular and Blazor components to improve performance - Leveraging Caching strategies to enhance response times Testing and Continuous Deployment: For any modern application, testing and deployment are crucial. We’ll discuss: - Unit and integration testing in ASP.NET Core, Blazor, and Angular - Automated end-to-end testing (e.g., with Cypress for Angular, bUnit for Blazor) - Continuous Integration/Continuous Deployment (CI/CD) strategies for seamless deployment to cloud platforms like Azure or AWS When to Choose Angular, Blazor, or Both: It’s essential and interesting to know when to use each of these frameworks depending on your project’s needs. Some scenarios we’ll explore: - When to go for Blazor for a unified C# experience in both frontend and backend - Why you might opt for Angular when building highly interactive, feature-rich web applications - Hybrid approaches where you can use Blazor and Angular together for a robust full-stack solution SO: Combining ASP.NET Core, Blazor, and Angular allows developers to choose the right tool for the right job, creating flexible, scalable, and maintainable web applications. Whether you’re leveraging Blazor for its deep integration with .NET or Angular for its powerful frontend capabilities, these technologies offer a powerful suite of tools to build modern web applications. What are your thoughts? How have you integrated Angular or Blazor with ASP.NET Core in your projects? Share your experiences and challenges, and let's collaborate on solutions!
Singleton Class with Async
I'm working on building a Blazor Web App (.net 9) for an internal company portal. I want to load some persistent data to be used throughout the app into a class and then load that class as a scoped service. Most of the data will be fairly static, but expensive data to retrieve, ie: graph api call for members of groups, etc. So that data will also be loaded asynchronously. Everything I've found regarding loading data into a class asynchronously basically points back to a post by Stephen Cleary on Asynchronous Lazy Initialization: https://blog.stephencleary.com/2012/08/asynchronous-lazy-initialization.html My question is, given that this post was originally posted back in 2012, is this still an acceptable way of loading data asynchronously for a singleton or are there other, more modern approaches to this scenario?
Convert the standard Blazor navigation menu to a collapsible icon menu
While I admittedly love Blazor I’ve always changed the out-of-the-box navigation menu that comes with it. It’s the first manoeuvre I pull when spinning up a new Blazor app, stripping out the purple gradient and getting it in, what I consider, a “blank slate state”. The other change I’ve wanted to make to the out-the-box look is one of those deluxe collapsible menus that leave just the icons showing. Anyone that’s used Azure DevOps will know what I’m talking about. I’ve included a picture to show DevOps example of what I’d like to see in my Blazor app. It gives a load of extra screen real estate which is always a priority for me in business applications particularly with complex or intensive workflows. Plus it gives the user the option to remove the text prompts once they are familiar with the system which is supported with carefully selected icon choices. As with most tasks that I assume will be an obvious solution I hit my search engine of choice and looked to avoid reinventing the wheel. However I found no source of pre-written changes to achieve this and was directed to fairly expensive third party controls to solve this one for me, which, being tight fisted, pushed me to do it for myself. Here I hope you save you the trouble of paying a pretty penny or having to wrestle the CSS into submission and provide a guide for producing a nice collapsible icon navigation menu by altering the existing out of the box menu in Blazor. In the following example I have left all the standard styling as is with the menu and just done the changes required to make the collapsible menu. The three files that require changes are MainLayout.razor, NavMenu.razor and NavMenu.razor.css. The code changes are shown below: Firstly the NavMenu.razor requires a bool value (IconMenuActive) to indicate whether the icon menu is showing or not, then wrap the text of the each NavItem in an if statement dependent on this bool. Then a method for toggling this bool and EventCalBack to send a bool to the MainLayout.razor for shrinking the width of the sidebar. Lastly there needs to be the control for switching menu views (I used the standard io icon arrows). NavMenu.razor <div class="top-row ps-3 navbar navbar-dark"> <div class="container-fluid"> <span class="oi oi-monitor" style="color:white;" aria-hidden="true"></span> @if (!@IconMenuActive) { <a class="navbar-brand" href="">The Menu Title Here</a> } <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu"> <span class="navbar-toggler-icon"></span> </button> </div> </div> <div class="@NavMenuCssClass" @onclick="ToggleNavMenu"> <nav class="flex-column"> <div class="nav-item px-3"> <NavLink class="nav-link" href="" Match="NavLinkMatch.All"> <span class="oi oi-home" aria-hidden="true"></span> @if (!@IconMenuActive) { <label>Home</label> } </NavLink> </div> <div class="nav-item px-3"> <NavLink class="nav-link" href="counter"> <span class="oi oi-plus" aria-hidden="true"></span> @if (!@IconMenuActive) { <label>Counter</label> } </NavLink> </div> <div class="nav-item px-3"> <NavLink class="nav-link" href="fetchdata"> <span class="oi oi-list-rich" aria-hidden="true"></span> @if (!@IconMenuActive) { <label>Fetch data</label> } </NavLink> </div> </nav> </div> <div class="bottom-row"> <div class="icon-menu-arrow"> @if (!@IconMenuActive) { <span class="oi oi-arrow-left" style="color: white;" @onclick="ToggleIconMenu"></span> } else { <span class="oi oi-arrow-right" style="color: white;" @onclick="ToggleIconMenu"></span> } </div> </div> @code { //bool to send to MainLayout for shrinking sidebar and showing/hide menu text private bool IconMenuActive { get; set; } = false; //EventCallback for sending bool to MainLayout [Parameter] public EventCallback<bool> ShowIconMenu { get; set; } private bool collapseNavMenu = true; private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null; private void ToggleNavMenu() { collapseNavMenu = !collapseNavMenu; } //Method to toggle IconMenuActive bool and send bool via EventCallback private async Task ToggleIconMenu() { IconMenuActive = !IconMenuActive; await ShowIconMenu.InvokeAsync(IconMenuActive); } } Next I add in a bit of CSS in to NavMenu.razor.css to put the arrow for toggling the menu at the bottom of the sidebar and a media query to make sure it doesn't show up in mobile view. The CSS classes added are .bottom-row and .icon-menu-arrow. NavMenu.razor.css .navbar-toggler { background-color: rgba(255, 255, 255, 0.1); } .top-row { height: 3.5rem; background-color: rgba(0,0,0,0.4); } .bottom-row { position: absolute; bottom: 0; padding-bottom: 10px; text-align: right; width: 100%; padding-right: 28px; } .icon-menu-arrow { text-align: right; } .navbar-brand { font-size: 1.1rem; } .oi { width: 2rem; font-size: 1.1rem; vertical-align: text-top; top: -2px; } .nav-item { font-size: 0.9rem; padding-bottom: 0.5rem; } .nav-item:first-of-type { padding-top: 1rem; } .nav-item:last-of-type { padding-bottom: 1rem; } .nav-item ::deep a { color: #d7d7d7; border-radius: 4px; height: 3rem; display: flex; align-items: center; line-height: 3rem; } .nav-item ::deep a.active { background-color: rgba(255,255,255,0.25); color: white; } .nav-item ::deep a:hover { background-color: rgba(255,255,255,0.1); color: white; } @media (min-width: 641px) { .navbar-toggler { display: none; } .collapse { /* Never collapse the sidebar for wide screens */ display: block; } } @media (max-width: 640px) { .bottom-row { display: block; } } Finally I add in the handler for the EventCallback to MainLayout.razor and a method to alter the width of the sidebar. MainLayout.razor @inherits LayoutComponentBase <div class="page"> <div class="sidebar" style="@IconMenuCssClass"> <NavMenu ShowIconMenu="ToggleIconMenu"/> </div> <main> <div class="top-row px-4"> <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a> </div> <article class="content px-4"> @Body </article> </main> </div> @code{ private bool _iconMenuActive { get; set; } private string? IconMenuCssClass => _iconMenuActive ? "width: 80px;" : null; protected void ToggleIconMenu(bool iconMenuActive) { _iconMenuActive = iconMenuActive; } } The final product of these little changes are shown in the pictures below: I'd love to hear if anyone has tackled this in a different way to me and if they've got any ideas on making it cleaner. Have yourselves a wonderful day, Gav
Blazor server app closes without error during debugging
The application started in debug mode stops reacting unexpectedly, without errors being intercepted and/or exceptions being generated. I don't know if this behavior can also happen when starting in release mode. In practice, the web application stops reacting in the browser. However, if I pause the execution in Visual Studio, a message warns me that the debug has timed out because the underlying application is no longer running. The attempts I made to solve the problem are: I tried to hook the unhandled errors with: AppDomain.CurrentDomain.UnhandledException += (handling code) But unhandled errors are not intercepted. I tried to remove the automatic start of the browser when the app starts in order to disconnect the closing of the browser with the end of the execution of the application. It does not solve the problem. Notes: It is a Blazor server application, it uses .NET 9 (but even with .NET 8 I encountered the problem). I updated visual studio, and all the nughet packages connected to the application. The application, terminating without there being any clues as to the cause because the debugging does not stop anywhere, can no longer be fixed. Thanks I tried to catch unhandled errors, but it seems that the app does not close due to exceptions during execution (debugging does not catch errors). I use Edge browser. I tried to remove breakpoints from the code.
.NET Core render modes
I moved my Blazor webassembly application form .NET 8 to .NET 9. Previously it was basicly two projects: Client (static webassembly content served in docker by nginx on port 5007 with API address set to port 5007) Server (database app with API on port 5009) and the typical usage was that I connect in the browser to port 5007, webassembly content was downloaded to the browser and display data gathered form the API on port 5007. After migration to .NET 9 I can no loger download web assemby package (connection reset), but instead everything is served on port 5009 (old webassemby content and API). Moreover everything is working considerably faster but I`m confused: Why and how it is even working (how content from client appear in the server)? Which render mode I`m using currently? Do I still need my second container with nginx? How should I clean my Startup.cs in the Server project after taht migration? namespace eTabelki.Server { public class Startup { readonly string CorsOrigins = "CorsOrigins"; public Startup(IConfiguration configuration) { Configuration = configuration; } public IConfiguration Configuration { get; } // This method gets called by the runtime. Use this method to add services to the container. // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940 public void ConfigureServices(IServiceCollection services) { services.AddDbContext<ApplicationDbContext>(options => options.UseSqlite(Configuration.GetConnectionString("DefaultConnection"))); services.AddAutoMapper(AppDomain.CurrentDomain.GetAssemblies()); services.AddControllersWithViews(); services.AddRazorPages().AddJsonOptions(options => { options.JsonSerializerOptions.ReferenceHandler = System.Text.Json.Serialization.ReferenceHandler.Preserve; options.JsonSerializerOptions.PropertyNamingPolicy = null; }); services.AddCors(options => { options.AddPolicy(CorsOrigins, builder => builder.WithOrigins("http://10.0.10.3:5007", "https://10.0.10.3:5008") .AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader()); }); services.AddTransient<IGenerateInvoiceService, GenerateInvoiceService>(); services.AddTransient<IExportService, ExportService>(); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); app.UseWebAssemblyDebugging(); using (IServiceScope scope = app.ApplicationServices.GetRequiredService<IServiceScopeFactory>().CreateScope()) { var context = scope.ServiceProvider.GetRequiredService<ApplicationDbContext>(); context.Database.Migrate(); ApplicationDbContextExtensions.EnsureSeedData(context).GetAwaiter().GetResult(); ApplicationDbContextExtensions.EnsureSeedTemplates(context).GetAwaiter().GetResult(); } } else { app.UseExceptionHandler("/Error"); // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. app.UseHsts(); using (IServiceScope scope = app.ApplicationServices.GetRequiredService<IServiceScopeFactory>().CreateScope()) { var context = scope.ServiceProvider.GetRequiredService<ApplicationDbContext>(); context.Database.Migrate(); ApplicationDbContextExtensions.EnsureSeedTemplates(context).GetAwaiter().GetResult(); } } var cultureInfo = new CultureInfo("pl-PL"); CultureInfo.DefaultThreadCurrentCulture = cultureInfo; CultureInfo.DefaultThreadCurrentUICulture = cultureInfo; app.UseHttpsRedirection(); app.UseBlazorFrameworkFiles(); app.UseStaticFiles(); app.UseRouting(); app.UseCors(CorsOrigins); app.UseEndpoints(endpoints => { endpoints.MapRazorPages(); endpoints.MapControllers(); endpoints.MapFallbackToFile("index.html"); }); } } }
Solutions for Blazor problems
Hi, I've significantly reduced render times, section rendering and configuration, API exposure, ... And I am starting thinking of sharing. I've never done this before, so I am wondering how to offer my Blazor framework API. Feacures I've implemented: Defer rendering (on standard component level - as naturalrendering pipeline) Custom sections (with custom state proagation and optimization minimizing render requests - my sections allow for full generic settings usable in section definition component with any amount of RenderFragment or other parameters): <YourSection Param1="StateWatchedParam1" Param2="StateWatchedParam2"> <RenderFragment1> StateWatchedContent with single render on whole section outlet </RenderFragment1> <RenderFragment2> StateWatchedContent with single render on whole section outlet </RenderFragment2> </YourSection> Unit of Work system with unltimited dependency tree of steps described by FluentAPI and accessed only by input model from client side - thus limiting any API exposure. You would have to know descriptor, rights and then guess allowed steps and stil only can fill model with input data - nothing more ... LinQ projector pattern with lego building FluentAPI system - where any business logic can be break into named step in specific named projector, so you are out of ordinary expression tree completely. That projector pattern is correctly written to check for Queryable Provider and to work with the same expression tree also for Enumerable. (Thus the same lego pieces can work for client.) Blazor component messagging done on direct Task API system - so without any queue or backlog. You can directly pass any data between any Blazor component and you are doing it in direct way without any delay or data transfer. Here I have SignalR also in the same system - allowing server to communicate with any component needed. And whole system is communicating with ToastLogger, thus any issue/unhandled exception can be (and it is) instantly logged and toasted to user. Background runner - thus any Task in Blazor can be called to just RunInBackground and it is immediately handled in Task lock mechanism, Exception mechanism and with correct Blazor stae update pipeline thus allowing for partial renders and mid render switch to background process finishing later and rendering from that deferred background.
Adding an Icon to the iPhone HomeScreen disables Blazor Server re-connection indefinitely.
When I use my Blazor Server app (.NET 8) with Safari on my iPhone, I am asked to Reconnect to the Server when the connection is lost. I swipe down and a connection is re-established. If I make an Icon on the iPhone Home Screen (mimicking an iPhone app) I am unable to re-establish a Connection. Swiping down to refresh the page does nothing. Is there a solution for this via Blazor Server? Thank you
Use background Service With SignlarR In Blazor
i use blazor webassemly .net 8 i want every 5 sec send time to all clients this is my project https://github.com/jones1995wm/SendTime but when i navigate to /chat page component this code send time to all users await _clockHub.Clients.All.ShowTime(DateTime.Now); but not called the hubConnection.On("ShowTime") and dont update ui (foreach) why ? i use this https://learn.microsoft.com/en-us/aspnet/core/signalr/background-services?view=aspnetcore-8.0 how to use timer or background service with signalR in blazor to send time every 10 second
