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!Deploy your ASP.NET Core Web API with the help of GitHub Copilot for Azure in Visual Studio Code.
Introducing GitHub Copilot for Azure, your personal assistant to streamline the deployment process. It provides you with clear, step-by-step instructions to deploy your applications and assists with troubleshooting, making your development journey smoother and more efficient. In this blog, we’ll explore how to deploy an ASP.NET Core API to Azure using GitHub Copilot for Azure in Visual Studio Code. By leveraging Copilot’s AI capabilities, I’ll guide it with prompts to streamline the deployment process. Together, we’ll learn how to transform a locally developed API into a cloud-hosted solution with ease. Prerequisites An Azure account and a subscription. Create Azure for free or pay as you go A GitHub account and GitHub Copilot Subscription. creating-an-account-on-GitHub and quick start on copilots Visual Studio code. See more info on setting up vs code GitHub Copilot and GitHub Copilot Chat Extension. Set up GitHub Copilot in VS Code and Getting started with Copilot Chat in VS Code .NET SDK. Download it here, C# Dev-kit Extension in VS Code. More on C# Dev-kit Prepare I will be deploying the TodoApi developed with ASP.NET Core. The source code is available on GitHub. Follow these steps to have the project on your local machine. Head to the GitHub repo: Github-Copilot-for-Azure-TodoApi-Sample Clone the Repository on your terminal or download as Zip: git clone https://github.com/kemboi590/Github-Copilot-for-Azure-TodoApi-Sample-.git Change directory to the cloned folder: cd Github-Copilot-for-Azure-TodoApi-Sample- Install required Packages: dotnet restore Open with Visual Studio Code: code . Here is an illustration of the steps: Run the application - Open the inbuilt terminal on Visual Studio Code and type the following: dotnet run The API is now running and we can test it using REST Client. Calling REST APIs From the IDE Install the rest client extension. - Open the extension and search for Rest Client and install it. Open TodoApi.http file and start testing the routes: GitHub Copilot Set up When you install GitHub Copilot Extension, you also get GitHub Copilot Chat, a conversational extension that provides conversational AI assistance Go to extensions Search for GitHub Copilot Install GitHub Copilot for Azure GitHub Copilot for Azure extension is designed to help streamline the process of developing for Azure. On extensions, search for GitHub Copilot for Azure Install the extension Start your Conversation with GitHub Copilot for Azure extension Open the chat, use the shortcut keys: ctr + shift + I or open chat by clicking on the chat Icon. To use GitHub Copilot for Azure use azure then describe what you want it to help you with. I will share with you my prompts that I am using so that you can use them as well. Note: Your GitHub Copilot for Azure may not give the same output as mine. Here are the steps to Deploy our WebApp. Describe what you want GitHub Copilot for Azure to help you with. - Give a clear information so that the copilot will get to respond better. - Try this prompt: @Azure I have developed an ASP.NET Core web API using Visual Studio Code, which is a simple TodoAPI with CRUD Functionalities with no database, I would like to deploy it on azure with your help because I have no experience. Which services should I use and which options do I have to have it on azure - GitHub Copilot for Azure Suggest that for an API, we should use Azure App Services Let’s ask for more details @Azure to deploy Azure App services on Visual Studio Code, which are the available options? We now have three options, o Using Visual Studio Code Extension – App Service Extension o Manual Process – On Azure Portal o Automated CI/CD Pipeline on GitHub App Service Extension - I will go with the first Option (Using Visual Studio Code– App Service Extension) Asking for more steps I will ask GitHub Copilot to give me some steps I will use to deploy using App Service Extension @Azure Guide me on the steps using App Service Extension - Open the extensions and install App Service Extension - You will be requested to sign in to your azure account. Ensure you have azure subscription so that you can be able to deploy your API. Working with Azure tools - You will note that Azure icon is available is the side bar - Click on it and you will see the App Services under your subscription. Create an App Service Web App from the available options - Click on App Service and click on Create button (+) to create an App Service Web App. Web App Name - Give a unique name of your new web app and click Enter - I will name mine azure-copilot-demo Choose Runtime Stack - If you are following along with TodoApi project, select .NET 9 and click Enter. Select Pricing Tier Let’s ask copilot of these pricing tiers: @Azure While selecting the pricing tiers, i see three options. Free F1 Basic B1 Premium P1V2 Which one do I select I will select Basic (B1) because I consider my project small-to-medium applications and low-traffic production workloads. Web App created on the Terminal for Azure - It will take some few seconds for the web app to be created Publish your App - Want to know why should you publish your project? - Let’s ask GitHub copilot for Azure for clarification: @Azure what does this command do? - Open the terminal on the folder with the project and type the following command: dotnet publish -c Release -o ./bin/Publish New bin/publish Folder has been created - The folder contains our project which is now ready to deploy Deploy - Right Click on the new web app (azure-copilot-demo) on the list and choose deploy to web app - Browse the /bin/publish folder and select it: Deployment success - It will take some few mins for the Web App to be deployed. Check on your terminal for Azure. - Wait for some time then your web pp will be running on Azure. Working with deployed Web App - I will also use REST Client to test the deployed web App on Visual Studio Code. - The end pot I will be using will be: https://azure-copilot-demo.azurewebsites.net/ - Without starting the server this time, replace the Host Address with the one you got after deploying the web App. POST Request: - Test the other routes and they should all be working just fine. Conclusion We have been able to deploy our TodoApi with the help of GitHub Copilot for Azure. I hope you had a great time following a long and were able to deploy your application as well. You are not limited to deploying the Web Apps alone with the help of GitHub Copilot for Azure. Feel free to explore other services and remember to share feedback. Resources Get started with GitHub Copilot for Azure Preview Get started with GitHub Copilot Training Module on Microsoft Learn Example prompts for learning about Azure and your application with GitHub Copilot for Azure Preview.NET Conf 2021
.NET Conf is a free, three-day, virtual developer event that celebrates the major releases of the .NET development platform. It is co-organized by the .NET community and Microsoft, and sponsored by the .NET Foundation and our ecosystem partners. Come celebrate and learn about what you can do with .NET 6. Checkout the full schedule at https://www.dotnetconf.net/agenda Day 1 - November 9 Day one is all about the big news, .NET 6! Join the .NET team on all the new things you can do with the latest release. 8:00 - 9:00 Keynote with Scott Hunter and members of the .NET team 9:00 - 17:00 Sessions from the .NET teams at Microsoft 17:00 - 19:00 Virtual Attendee Party (CodeParty #1). Have fun and win prizes from our sponsors. Day 2 - November 10 Day two is where we dive deeper into all the things you can do with .NET and our 24 hour broadcast begins with community speakers around the world. 7:00 - 9:00 Virtual Attendee Party (CodeParty #2). Have fun and win prizes from our sponsors. 9:00 - 17:00 Sessions from teams all around Microsoft 17:00 - 23:59 Community sessions in local time zones around the world Day 3 - November 11 Day three continues our all day and night broadcast with speakers around the world in their own time zones. 0:00 - 17:00 Community sessions in local time zones around the world
Help with my ASP.NET API Application
I have been developing API for a full stack application with React FrontEnd in ASP.NET for my Internship project which is an Asset Management System. I have successfully implemented API Endpoints for CRUD with Authentication with JWT. What topic should I learn next ? Should I start providing API Documentation or is there something else I need to learn ? I have also uploaded the Schema the project is using. I am using ADO.NET instead of Entity Framework for quering with the database. The link to my Repository Source Code: https://github.com/bibashmanjusubedi/Internship
ASP.NET Core 8 Method PATCH is not allowed by Access-Control-Allow-Methods in preflight response.
I created a PATCH method in an ASP.NET Core Web API like this: #region Patch /// <summary> /// Patch TableName by id. /// </summary> // PATCH BY ID: /TableName/patch/{id} [HttpPatch("[action]/{id}", Name = "PatchTableNameById")] [ProducesResponseType(StatusCodes.Status200OK)] [ProducesResponseType(StatusCodes.Status404NotFound)] [ProducesResponseType(StatusCodes.Status400BadRequest)] [SwaggerOperation( Summary = "Patch Table Name by id", Description = "This can be used to modify any table name record", OperationId = "PatchTableNameById", Tags = new[] { "Patch" } )] public async Task<IActionResult> Patch(string id, [FromBody] JsonPatchDocument<TableName> patchDoc) { if (patchDoc != null) { var tablename = await context.TableName.SingleOrDefaultAsync(x => x.Id.ToString() == id); if (tablename == null) return NotFound(); patchDoc.ApplyTo(tablename); context.Entry(tablename).State = EntityState.Modified; if (!ModelState.IsValid) { return BadRequest(ModelState); } await context.SaveChangesAsync(); return new ObjectResult(tablename); } else { return BadRequest(ModelState); } } This works perfectly fine when I call it using Postman or directly using Swagger. However in my Blazor client I get an error when it is called. I have tried using httpclient, RestSharp and now Flurl. The error returned when using the Developer Tools console to review the log is: Access to fetch at 'http://localhost:5259/SharedServices/Commands/TableName/patch/2bd4e0f3-974a-4794-bb63-b0ce00ba5147' from origin 'http://localhost:5265' has been blocked by CORS policy: Method PATCH is not allowed by Access-Control-Allow-Methods in preflight response. Here is my CORS policy in the Web API. It is called before anything else adding services. builder.Services.AddCors(options => { options.AddPolicy("AllowSpecificOrigins", builder => { builder.WithOrigins("http://localhost:56075", "http://localhost:5265", "https://localhost:7235").AllowAnyHeader().WithMethods("PATCH"); }); }); I have tried various combinations here including of allowing all methods, headers, and origins. In other words opening it wide up which isn't a great security tactic anyways. Here is my client side code for the call. public async Task Patch(string id, JsonPatchDocument<TableName> patchDoc) { var url = "http://localhost:5259/SharedServices/Commands/TableName/patch/" + id; var resultStr = await url.WithHeader("Content-Type", "application/json-patch+json").PatchJsonAsync(patchDoc) .ReceiveString(); } I have tried about every online suggestion to fix this. One problem is there are a lack of issue reports for later versions of asp.net -- post addition of addCORS. I have tried various browsers thinking this maybe a browser issue but no luck there either. Is this possibly a bug in asp.net core cors? I am also using Steeltoe. Is it possible it is interfering with this? Is there any way to turn off a preflight request or modify it? I tried to use various clients such as httpclient, restsharp, flurl. Also tried using a PUT and got the same issue. I have also tried various browsers. The expected result is a successful unblocked call to my web api method. Thanks for any help you can give!
HttpWebRequest timeout not working
When I disconnect the ethernet, the request just hangs. HttpWebRequest request = (HttpWebRequest )WebRequest.Create(WebAddressPreAmble + WebAddress + WebAddressQuery); // Create(sQuery); request.Credentials = CredentialCache.DefaultCredentials; request.Timeout = 10000; request.ReadWriteTimeout = 1000; // Get the response. HttpWebResponse response = (HttpWebResponse)request.GetResponse(); // Display the status. if (response.StatusDescription.Equals("OK"))
