OdeToCode IC Logo

UseNodeModules Updated for .NET Core 3

Monday, October 7, 2019

UseNodeModules is a NuGet package I put together a few years ago. The package gives you an easy way to install middleware for serving content directly from the node_modules folder in an ASP.NET Core project.

 public void Configure(IApplicationBuilder app)
{
    app.UseNodeModules(maxAge: TimeSpan.FromSeconds(600));
}

The idea is that during development you can use npm to manage all your client-side dependencies and you can use those dependencies immediately instead of setting up a process to copy files into the wwwroot folder. In production, you might use environment tag helpers to serve files you’ve bundled during a build, or to use minified files from a CDN. During development, however, you don’t have to wait for bundling, minification, and copying to occur.

Here's an example with Bootstrap 4. In development we'll serve directly from the node_modules folder. In any other environment we'll serve a minified file from a CDN, but with fallbacks to the node_modules folder in case the CDN is unavailable.

<environment include="Development">
    <link href="~/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/bootstrap/4.3.1/css/bootstrap.min.css"
    asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
    asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
</environment>

Be aware that dotnet publish will not copy the node_modules folder to the published output directory. You can change this behavior by adding the following to the .csproj file.

<ItemGroup>
    <Content Include="node_modules\**" CopyToPublishDirectory="PreserveNewest" />
</ItemGroup>

A nice side benefit of the above code is how Visual Studio users will also see node_modules in the Solution Explorer view. Otherwise, the folder is hidden by Visual Studio, which I’ve never understood.

Thanks to Shawn Wildermuth for the help!


Comments
Gravatar Saeid Tuesday, October 8, 2019
" Otherwise, the folder is hidden by Visual Studio, which I’ve never understood." Usually this folder contains thousands of files and showing them by using a UI, will slow down everything badly. Also I don't think using files directly from the `node_modules` folder is a best practice. it's better to bundle and minify them.
Gravatar scott Tuesday, October 8, 2019
@Saeid: I can't think of any other editor that would hide node_modules, so Visual Studio is an outlier here. If you used an editor other than VS and looked in node_modules, you'd see that many libraries already ship minified versions. Keep the context in mind. This isn't for building apps with Angular 8, it's for the person who wants to serve one JS library and one CSS library without a hassle.
Your Comment