Managing Two Single Page Applications with ASP.NET Core 3.1 Web API

Learn how to effectively manage two Single Page Applications using ASP.NET Core 3.1 Web API, serving one at the root and the other in the `admin` route.
---
This video is based on the question https://stackoverflow.com/q/68569851/ asked by the user 'amin mohammadi' ( https://stackoverflow.com/u/4699273/ ) and on the answer https://stackoverflow.com/a/68570913/ provided by the user 'abdusco' ( https://stackoverflow.com/u/5298150/ ) 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: Manage two SPA in a single ASP.NET Core 3.1 Web API; One in the root and the other in "admin" route

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.
---
Managing Two Single Page Applications with ASP.NET Core 3.1 Web API

In web development, Single Page Applications (SPAs) have become a popular choice for creating efficient and seamless user experiences. However, managing multiple SPAs within a single web application can present challenges—especially when it comes to routing. This guide will guide you through a practical solution for managing two SPAs in an ASP.NET Core 3.1 Web API, ensuring one is served at the root and the other is accessible via the "admin" route.

The Problem

You have an ASP.NET Core 3.1 Web API that utilizes two distinct Angular applications:

The primary app, located at the root (e.g., /).

The admin app, which is available at the /admin route.

Your current challenge arises when trying to serve the primary app from the root path. Despite attempting to modify the routing code from /app to /, you found that it didn't function as expected.

Solution to Serve Two SPAs

By adjusting your routing configuration, you can successfully host both your SPAs. Below, we break down the solution into manageable steps.

Step 1: Adjust the Routing

The first thing you need to do is modify the routing in your Startup.cs file. Here’s how you can structure it:

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

Step 2: Understanding the Changes

Mapping the Admin App: The Map("/admin") method allows you to define middleware specifically for the admin SPA. This means that when a request is made to any URL that starts with /admin, the request will be processed by the admin SPA middleware.

Serving the Main App: The UseSpa() middleware outside of the Map() call handles all other routes, essentially serving your main app. This setup ensures that for all requests not directed to the /admin route, the main application will be processed, allowing it to run at the root path.

Step 3: Validation of Routing Behavior

With this setup, request handling will follow these rules:

Requests to /admin* will be processed by the admin SPA.

Any other requests (e.g., /, /about, etc.) will redirect to the main app hosted at the root.

Additional Considerations

Static File Options: Depending on your needs, consider setting up static file options to manage different assets. Each SPA can have its own static file settings defined in their respective middleware.

Error Handling: Implement proper error handling to ensure that if the requested SPA cannot be found, the user is redirected or shown an appropriate message.

Performance: Always monitor the performance of each SPA, especially when routed through the same application. Ensure that both applications are optimized for the best user experience.

Conclusion

Managing multiple SPAs in a single ASP.NET Core 3.1 Web API doesn't have to be complicated. By following the steps provided, you can seamlessly serve one application at the root and another at a specific route. This setup not only simplifies your routing logic but also keeps your applications organized and efficient.

With this guide, you should now have a clear understanding of how to configure your application for hosting multiple SPAs without conflicts. Happy coding!

Видео Managing Two Single Page Applications with ASP.NET Core 3.1 Web API канала vlogize