npm - How to access node_modules folder from wwwroot in asp.net vnext project

Question

How can I access the node_modules folder which is not included in the visual studio solution file from the wwwroot where my index.html is put. That index.html file need to reference the npm installed packages like angular.js.

But how?

I do not want to copy the whole node_modules folder into wwwroot. Those are not the files to live there...

I do not want to include the node_modules folder to the solution because that will slow down everything and hang up...

It seems Frontend development belongs not in VS...

Answer 1

There are at least two sane choices:

• Serve other folders by using app.UseStaticFiles. The original solution is from Ode to Code. I use it for development, because Visual Studio doesn't seem to respect local .npmrc file set up with prefix = wwwroot/node_modules. Ideally, node_modules should be bundled for production. There is npm rollup plugin that can automatically bundle scripts using import feature (ES2015).

• Serve node_modules from CDN (e.g. unpkg.com). This is fairly simple, the only downside is CDN's response time, especially if you've disabled browser caching for development purposes.

Here is the code to serve folders in ASP.NET Core. You only need to change the Startup class:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    ...some other stuff

    if (env.IsDevelopment())
    {
        ServeFromDirectory(app, env, "node_modules");
    }
}

public void ServeFromDirectory(IApplicationBuilder app, IHostingEnvironment env, string path)
{
    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(env.ContentRootPath, path)
        ),
        RequestPath = "/" + path
    });
}