Scenario: We have an API that we are building an Angular single page app for, and we require multiple tenants. Each tenant has specific access credentials that allow them to interact with their database. But I have to allow for the tenant to take this SPA and host it on their own website if they choose to, which is why I have made it a very generic Angular SPA. We cannot expose the security credentials to the API in JavaScript, so it takes a server side component. I am using MVC routing to interpret which tenant the user is going to, then it acquires a session token and passes it to the JavaScript so the SPA will function using that token.
Normally, with this scenario if you are using Razor, you can just use bundling or the virtual directory (~) in your JavaScript src attribute. However, since it is pure HTML, it has no clue what ~ means.
Here is the routes I have for the tenant:
routes.MapRoute(
name: "Default",
url: "{tenantName}/{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
So a typical URL will look like:
http://localhost:51982/Tenant2/Home
With the JavaScript src referencing:
<script src="Scripts/angular.min.js"></script>
Of course, this causes the URL to look like:
http://localhost:51982/Tenant2/Scripts/angular.min.js
Which will result in a 404 error. Now, if I change it to:
<script src="/Scripts/angular.min.js"></script>
It will work because it goes to the root of the site. That is great, up until I have to deploy it to as a Web Application rather than a website like:
http://localhost:51982/WebApp1/Tenant2/Home
So ideally, I'm trying to find a way to force MVC to strip out the Tenant identifier of the URL if the reference goes to an actual file name. The only way I can find that it will work is that I have to just use /Scripts/xxxx.js and so the site will only work when set up as a Website and not a Web Application. I was hoping someone might have come across this unique scenario before.
