How can I add downloaded from NuGet bootstrap package to wwwroot?

Question

I just downloaded bootstrap package from NuGet, and I don't understand how to actually locate it in /wwwroot/... whatever it supposed to be (ASP.NET Core 2.X MVC project). I have no experience with VisualStudio, and I guess that it might be automatically generated in case of VS. What can I do in Rider?

Answer 1

As PFX said, it's not the best idea to use nuget to install client-side dependencies, because it doesn't include them automatically in your project, instead, it adds a new entry to the .csproj file:

  <ItemGroup>
    <PackageReference Include="bootstrap" Version="5.3.3" />
  </ItemGroup>

And the files stored in %userprofile%\.nuget\packages\bootstrap

In this case, you may need to manually transfer those file to the destination which is a very bad idea.

The general recommended solution is to use bower or npm to install dependencies, e.g

npm i bootstrap

in this case, it downloads dependencies in node_module of the running directory and not in the wwwroot folder. you can use a build tool like Webpack or a task runner like Gulp to copy the necessary files from node_modules to the wwwroot directory during the build process which may be cumbersome for simple asp.net core applications.

So Microsoft introduced Libman for this simple scenario, but Rider doesn't have Libman, for this you can use Libman cli

First you need to install this tool via dotnet-cli :

dotnet tool install -g Microsoft.Web.LibraryManager.Cli

Then install your dependencies :

libman install bootstrap

This will bring some prompts that have similar experience as Visual Studio and install those dependencies in your wwwroot directory

Answer 2

In VS for ASP.NET CORE, all your packages go inside " Dependencies", and your bootstrap files are saved inside "wwwroot -> lib -> bootstrap -> dist -> css".

Answer 3

There are many tools to install client-side packages like JQuery, bootstrap, AngularJs etc. in both VisualStudio and Rider. Since Asp.Net Core projects don’t allow you to use NuGet Package Manager for client-side dependencies, you should use NPM, yarn, web pack or for Visual Studio users, you can use Library Manager(LibMan) which is a lightweight client-side library acquisition tool. I will explain the usages of NPM for developers who use JetBrains Rider on Mac or Linux environment and LibMan for Visual Studio users. If its a lower version you can update from the same screen.

For Visual Studio users: To be able to use LibMan you should have VS 2017 version 15.8 or higher. You can check it from the tab Help -> About Microsoft Visual Studio. Once it’s done right-click to the Project and select Add -> Client-Side Library. Choose cdnjs provider and type the name of the package you want to install (bootstrap, JQuery etc) in the library textbox and click Install button. Once it’s installed you will see a lib file created in wwwroot folder. You can skip the Mac users part and below, I have also explained how to use the reference for the absolute beginners.

For Mac/Jetbrains Rider users: go to the following path: View -> Tool Windows -> Terminal and run “npm install --save bootstrap” command. You will probably have a saveError for not having package.json. Ignore it.

Once it’s downloaded (you can directly check from the project path) open Finder and go to your project path. Create a directory called lib. (Name does not matter but the folder should be under the wwwroot file). Cut the bootstrap folder from Node_Modules and paste it into lib file that you have created.

This part is the same for both Visual Studio and Jetbrains Rider users:

Once it’s done add the following link (if you have a different path, use that one) to your _Layout page header (suggested) or directly adds a reference into a specific view:

<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>

And in the body encapsulate @RenderBody with a div with using a bootstrap class (I used container) to see whether your changes are applied.

<div class="container">
    @RenderBody()
</div>

Try to add some Html with bootstrap on your index page and see if you can use bootstrap. If you still don’t see then I suggest you go to your commit changes (Command + K) and be sure you have your bootstrap files under the right path.

Answer 4

For .NET Core webprojects you can’t use NuGet to install clientside dependencies like eg Bootstrap; instead you must use a web package manager like eg Bower (which is depricated in the meantime) or yarn or npm and webpack. NuGet is only for serverside dependencies.