How to use yarn in ASP.Net core MVC to install bootstrap in wwwroot folder

Question

recently I started learning ASP.Net core MVC. I always used bower to install packages for my projects in Visual Studio 2017. but now I want to use yarn. since it seems bower is deprecated. but I don't know how to use yarn to install bootstarp in wwwroot folder. for bower i used bower.json and it would install bootstarp automatically. I use "yarn add bootstrap@4.0.0-alpha.6 --dev" but it install it in node_modules in the project folder and I can't see it in the solution explorer, thanks

Answer 1

It's best to use npm(a package manager) for Asp.net core application,start by searching and adding a package called npm by right clicking on your project name in solution explorer in vs2017 and clicking on "add" => add new item",inside the package,add in your bootstrap as a dependency as showed below,

{
  "version": "1.0.0",
  "name": "nameofyourapplicationinsmallcaps",
  "private": true,
  "devDependencies": {
  },

  "dependencies": {
    "bootstrap": "4.1.0"
  }
}

Next ==> Create a root folder within your project named middleware,you would be building a custom extension/midleware(these would look into the node module folder to serve up files) in your request pipelines inside of startup.cs ,ensure you place the new extension which can be named app.UseNodeModules() underneath the app.UseStaticFiles() middleware( these serves up files from the wwwroot folder) as showed below,

app.UseStaticFiles(); app.UseNodeModules(env.ContentRootPath);

Inside the middleware folder,add a class which can be named ApplicationBuilderExtensions.cs , you would be creating a app.UseStaticFiles() with its own request path pointing to the npm package,add the below to the class(you wont be using the default app.UseStaticFiles()),

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

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

Next ==> look for an icon inside of your solution explorer in vs2017 named "show all files" and click it,you would see a node_module folder,expand this folder to view bootstrap=>dist=>css, drag the bootstrap.css in between the opening and closing head tag in your _Layout.cshtml.

After doing all these, you can start making use of bootstrap classes to add styling to your project.