Search code examples
angularasp.net-core

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


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?


Solution

  • 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.