ASP.NET Core empty project. How to make bower and wwwroot work properly

Question

I have started a new ASP.NET Core empty project and want to add bootstrap and JQuery through bower, but there is no "bower.json" file. So i've added one with the following content:

{
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "bootstrap": "3.3.7",
    "jquery": "2.2.0",
    "jquery-validation": "1.14.0",
    "jquery-validation-unobtrusive": "3.2.6"
  }
}

And then a new folder "Bower" appeared at "Dependencies" and a hidden folder "bower_components" with all the code, but the "wwwroot" remained empty, as it is shown in the following picture.

So, how can i make it to automatically add the files to the "wwwroot" folder when changing the bower.json file, so i can use it within my project?

score 5 · Accepted Answer · answered Aug 31 '17 at 08:28

You'll want to add a .bowerrc file to the root of the project. In there, you can add the following content:

{
    "directory": "wwwroot"
}

On a side-note, bower is no longer a recommended option for new projects. They even say it themselves on their website:

...psst! While Bower is maintained, we recommend yarn and webpack for new front-end projects!

For simple ASP.NET Core projects, I personally think it would be a bit excessive to introduce yarn and webpack, so you'll most likely be fine with bower. Another option would be to use a CDN for static resources such as bootstrap and jQuery.

EDIT: The message from bower does specifically mention front-end projects, so perhaps they would agree with using it in your situation anyway.

ASP.NET Core empty project. How to make bower and wwwroot work properly

1 Answers1