How to serve static files from the nodemodules in ASP.NET Core

Here I am going to explain how to serve static files from the nodemodules

Step 1 : Add a NPM package.json file
Right click on Visual Studio Add > NewItem and select NPM configuration files and add to the project.


Step 2 : Update the package.json with required dependencies for application.

Make sure name should be lowercase without space.

Once you save the package.json , you can see the npm package in project dependencies and also node modules are downloaded in to the project directory.You can include the node_modules folder in to your VS Project by clicking show all files and include in to the project.

Step 3 : Create Middle ware to serve the files from node_modules directory
In order to create your own middleware , First you have to create an extension method for the builder to serve the files from the node_modules directory

using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.FileProviders;
using System.IO;

namespace Microsoft.AspNetCore.Builder
{
public static class ApplicationBuilderExtensions
{
public static IApplicationBuilder UseNodeModules(this IApplicationBuilder app,string rootPath)
{
//Combine the rootpath to the node_modules to get the absolute path
var path = Path.Combine(rootPath, "node_modules");
var fileProvider = new PhysicalFileProvider(path);
var options = new StaticFileOptions();
options.RequestPath = "/node_modules";
options.FileProvider = fileProvider;
app.UseStaticFiles(options);
return app;
}
}
}

When you set a RequestPath , static files Middleware only try to respond to request starts with node_modules.

FileProvider is where does it goes to FileSystem to look for the file.

Finally Call the method by passing the application rootPath

using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Routing;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;

namespace Microsoft.AspNetCore.Builder
{
public class Startup
{

public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env,IConfiguration configuration ,ILogger logger)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}

app.UseStaticFiles();
app.UseNodeModules(env.ContentRootPath);
app.UseMvcWithDefaultRoute();
app.UseMvc(ConfigureRoutes);

}
private void ConfigureRoutes(IRouteBuilder routeBuilder)
{
routeBuilder.MapRoute("Default", "{controller=Home}/{action=Index}/{id}");
}
}
}

Note : Please make sure the namespaces for extension method and startup.cs class are same. This is the approach that Microsoft uses to resolve the extension method for IApplicationBuilder to ensure method is more diiscoverable.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s