Using UseStaticFiles with NPM Client Dependencies - Talk Me Out of It


Ok, please tell me how stupid this is. It's apt to be pretty stupid but I have a point to it. I'm trying to separate the ideas of prototyping quickly from preparing for production.

I've been using Bower to do examples of client-side dependencies. Bower is depreciated so for new dev, I don't want to recommend it (and VS2017 has removed it too). Bower is clean as you don't have to introduce a bunch of ideas like gulp or npm scripts to get someone with a working example quickly (Bower's .rc file let's you tell it where to put the dependencies). I want to do the same thing with NPM.

Here is the idea. Instead of writing a script or using gulp to move the files, I'm thinking of using UseStaticFiles to just allow node_modules directory to be available to client-side development. My expectation is that this is a development-only idea and will allow you to get up to speed quickly. But when you're ready to deploy, you'll need to do the harder work of writing a NPM script to copy only the files you really need.

Here's how it works. You add a new piece of StaticFiles middleware pointing to the node_modules directory so you never have to copy it to wwwroot. For example:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
  // ...

  app.UseStaticFiles();
  if (env.IsDevelopment)
  {
    app.UseStaticFiles(new StaticFileOptions()
    {
      RequestPath = PathString.FromUriComponent("/libs"),
      FileProvider = new PhysicalFileProvider(
          Path.Combine(Directory.GetCurrentDirectory(), "node_modules")),
    });
  }

  // ...
    
}

This way in Development, I can use the libs directory as an alias for node_modules to get up to speed quickly:

    <environment include="Development">
        <script src="~/libs/jquery/dist/jquery.js"></script>
        <script src="~/libs/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>

Who hates this idea?


Ready to Learn Vue with ASP.NET Core?

My new Wilder Minds' course is available as an Early Access for only $79. It will be released on a weekly basis. The first module is now available:

Enroll Today



Application Name WilderBlog Environment Name Production
Application Ver v4.0.30319 Runtime Framework x86
App Path D:\home\site\wwwroot\ Runtime Version .NET Core 4.6.26515.07
Operating System Microsoft Windows 10.0.14393 Runtime Arch X86