What is it?
Running a SPA (Single Page Application) on APS.NET Core is easy, it even comes out of the box. But I wanted to run two Angular SPA’s next to each other without having to setup a complete new ASP.NET Core project.
Currently APS.NET Core does not support hosting multiple SPA’s on the same project, though it is possible by using the Map function and handle some hosting settings yourself. But I wanted full control over the process of selecting witch SPA should be send to the client.
The result I wanted
So if a user goes to e.g. www.timdows.com it would serve SPA1, and if a user goes to e.g. hello.timdows.com it would server SPA2.
My project structure
- AngularApp1
- AngularApp2
- APS.NET Core project
Both the AngularApps build to a subfolder of a shared directory and are setup with the latest Angular CLI. I did not use the APS.NET Core SPA templates for this project.
The ASP.NET Core project has only some magic in the Startup.cs file under the Configure part. See the Startup.cs here.
Using the app.UseWhen middleware it is able to check if my condition is met, and if so, a different file is send to the client (the aboutPath index.html file in my case). Sending this file makes the browser thing that the path is always found (i.e. the browser starts the Angular SPA and the SPA is responsible for checking if the route is valid and a page should be displayed).
Conclusion
It is easy and possible to host multiple SPA’s but it lacks documentation on the interwebs. Just letting go of the SPA issue and thinking in serving different files pointed me in this solution, and it seems to work like a charm!