Run Angular App in .Net Core in directory other than wwwroot

Question

As the post title suggests, I'm attempting to build a .Net Core web application that also hosts an Angular application. The .Net Core web app serves as a wrapper to the Angular app in order to secure all of the resources of the Angular app (images, scripts, etc) so that they are only accessible once a user has authenticated.

I've read a host of posts about deploying an Angular app within a .Net Core site, but it seems invariably they all seem to be predicated on the Angular files being dropped into the wwwroot. However, doing so does not fulfill my requirement to lock all of the resources down until after authentication. The user workflow should be that when they hit the site, they are redirected to a login page, and upon successful authentication, they are then sent to a controller method that is the entry point for the Angular application.

I found this post, which seems to be right in line with what I need, but did not have a successful answer, so thought I'd post the question myself.

I did also find in my research, looking at the documentation for Static Files in ASP.NET Core, it states the following regarding Static Files:

The static file middleware doesn't provide authorization checks. Any >files served by it, including those under wwwroot, are publicly >accessible. To serve files based on authorization:

1. Store them outside of wwwroot and any directory accessible to the static file middleware and
2. Serve them via an action method to which authorization is applied. Return a FileResult object

After reading this, and pondering it, and playing around with it, I suddenly came to a question in my own mind: Given the difficulty posed in the other question by David referenced above, does this mean that if you want to lock down a static file and require authentication, the only way to serve the file is via a controller action that returns the FileResult, meaning that any script file or image file asset for the Angular application would have to accessed via this controller method? Presumably, then, you'd have to reference those files via a url that would cause a controller method to return the file.

If that is the case, given the way the Angular CLI chunks up the scripts, it would seem this would be an untenable solution. Am I understanding that correctly? Is there a more appropriate way to lock down all of the angular related resources until a user has authenticated?

Answer 1

As you've said, one solution is to bundle the Angular artifact into the .NET Core wwwroot/ and that limits you.

I think you're halfway there in thinking of a better solution, but I don't think forcing kestrel to serve static files outside of wwwroot/ is the solution.

When packaging Angular inside of .NET Core's wwwroot/ you are basically leveraging the already running kestrel as the web server to host your Angular app, and the only thing that kestrel needs to do is serve static files. And the only dependency of Angular on your .NET Core App is the API endpoints.

That being said, I think the optimal solution would be to simply not try to rely upon kestrel as a host for your Angular app.

Although there are many options, I would use Nginx or IIS, which will act as a reverse proxy so it can serve each of your apps.

I am currently working on a project which has a .NET Core API, an Angular App, and a Mongo DB instance all running on Docker. It works quite well and I know this is a viable solution.

Update

Based on your latest comment, I realized what your asking for is not a coded solution, but a IIS configuration / permissions solution.

Like you said, Kestrel doesn't provide authorization for serving static files, and you don't want to serve each file through a controller. You've obviously read and understand the "Static Files" section on the ASP.NET Core Docs so we need something else.

Check out this article and let me know if this is of any help or not.

Answer 2

I appreciate the efforts to answer. Ultimately, I was able to get where I needed, partly based on the answer to this question.

To solve the problem, I created a folder in the site to hold my angular application. Using the info from the other question regarding the creation of a custom middleware, I was able to create the middleware to use for protecting my static angular folder content. I added this middleware in my startup.cs referencing the path for my angular files, and then added an app.UseStaticFiles entry that provided the access to the angular directory i created.

By placing the middleware prior to the StaticFiles middleware for that directory, it is able to evaluate user policy authentication prior to serving the static files.

That did ultimately wreak havoc with a lot of path structures in the angular application, but I was able to work through them all to set the appropriate build properties, etc, such that now I can build the angular application, drop it in my static folder for the client app, and it's all protected by the .net authentication.