ASP.NET Core. Bower dependencies are not copied to wwwroot

Question

I have an ASP.Core project (Visual studio 2015) and I installed bootstrap to it by 'Manage Bower packages'

I see package in the project dependencies

But wwwroot is empty and I cannot access js and css files from my views.

Any ideas why?

Answer 1

You should use either: a bower settings file or a processor like gulp or webpack:

Option1: Bower Config

docs: https://bower.io/docs/config/

in short. you can create a .bowerrc file with { directory": "wwwroot/bower_components" }.

Now if you bower install your dependencies it will add them to wwwroot/bower_components instead.

For big, SEO related projects option2 is prefered though:

Option2: Processing

you can use tools like gulp to minify files before adding them to the wwwroot.

It add an extra step/complexity. but the advantage is smaller files (minification) + you only copy what you need resulting in a smaller published package.

in gulpfile.js you can do something like this:

var gulp = require('gulp');
var bower = require("./bower.json");
gulp.task("copy", function() {
  var resources = bower.webResources;
  var tasks = resources.map(function(resource) {
    return gulp.src("./bower_components/" + resource)
    .pipe(gulp.dest('./wwwroot/lib/')); //copy globpath to wwwroot/lib
  });
  return merge(tasks);
});

and then you can add a webResources list to your bower.json to define what needs to be copied:

"webResources": [ //bootstrap example, with globbing
  "bootstrap/dist/**/@(bootstrap.css|glyphicons-halflings-regular.*|bootstrap.js)",
]

Recommended Use Webpack2

You can use webpack2 to merge all web dependencies: Javascript, css, fonts, images into a single javascript file.

Downsides: * It will increase the build time, since webpack will now have to compile as well. (Pro: You can use devserver to build on demand). * Delta updates will be less efficient

Pro: * You get a single file as dependency * You can use latest javascript/typescript features and transpile&shim so it works on every browser.

Answer 2

As it ofter happens, the problem was found soon after post this question. Maybe it will be useful to someone.

Quick answer: Add bower.json to your project manually and then add dependencies.

Long answer: After you click to 'Show all files' there were no file 'bower.js'. I added it in 'add new item' for a project

and added this code

{
    "name": "asp.net",
    "private": true,
     "dependencies": {
       "bootstrap": "3.3.7",
       "jquery": "3.1.1"
    }
}

After it reloaded and copied packages to wwwroot

Answer 3

Adding Bower Packages to ASP.Net 2.1

Add Bower Packages

• In Toolbar Project => Quick Install Packages (shortcut => shift Alt 0)
• Choose Bower
• Type in Package Name e.g Bootstrap
• Choose the Version and click Install
• Create in root of solution two files
• Bower.json
• .bowerrc

Create a Bower.json file

{
  "name": "RazorPagesMovie",
  "dependencies": {
    "bootstrap": "4.1.3",
    "jquery": "3.3.1"
  }
}

Add the package names and versions

Create a .bowerrc file

This is the file that is critical as its here we name the path our files are to be made available ( our static files )

{
  "directory": "wwwroot/lib"
}

Add the directory to .bowerrc where you wish the files to be made available for development / production.

• You may need to restore packages with dotnet restore in the cli or right click on bower.json and click bower restore packages.
• Look in wwwroot. You should see a lib folder with your packages inside.
• Add the files paths to your script tags within your _Layout.cshtml file

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy">
</script>

• NB check if you also need to update any css link files or change version references.