ASP.NET Kernel Bower dependencies are not copied to wwwroot

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

enter image description here

I see a package in project dependencies

enter image description here

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

enter image description here

Any ideas why?

+5
source share
3 answers

You should use either: a gazebo settings file or a processor such as gulp or webpack:

Option 1: Bower Configuration

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

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

Now, if you bower install your dependencies, they will add them to wwwroot / bower_components.

For large projects with SEO support, option2 is preferable:

Option 2: Processing

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

It adds an extra step / complexity. but the advantage in smaller files (minimization) + you copy only what you need, the result is 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 list of webResources to your bower.json to determine what you need to copy:

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

Recommended Use of Webpack2

You can use webpack2 to combine all the dependencies on the Internet: Javascript, css, fonts, images into a single javascript file.

Downsides: * This will increase build time since webpack will now have to be compiled. (Pro: you can use devserver to build on demand). * Delta updates will be less effective

Pro: * You get one file as a dependency * You can use the latest javascript / typescript functions and drag and scale to make it work in every browser.

+5
source

Be that as it may, the problem was discovered shortly after the publication of this issue. Maybe it will be useful to someone.

Quick response . Add bower.json to your project manually, and then add the dependencies.

Long answer : After you click "Show all files", there was no "bower.js" file. I added it to the "add new item" for the project

enter image description here

enter image description here

and added this code

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

After rebooting and copying packages to wwwroot

+3
source

Adding Bower Packages to ASP.Net 2.1

Add Packing Packages

  • In Projectbar Project => Quick Install Packages (shortcut => shift Alt 0)
  • Choose Bower
  • Enter a package name, for example Bootstrap
  • Select "Version" and click "Install."
  • Create two files in the root of the solution
  • Bower.json
  • .bowerrc

Create Bower.json File

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

Add package names and versions

Create a .bowerrc file

This is a file that is critical, because here we name the path where our files should be available (our static files)

 { "directory": "wwwroot/lib" } 

Add a directory to .bowerrc where you want the files to be available for development / production.

  • You may need to restore the dotnet recovery packages in Kli, or right-click on bower.json and click on bower recovery packages.
  • Take a look at wwwroot. You should see the lib folder with your packages inside.
  • Add the file paths to your script tags in the _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 links.

0
source

Source: https://habr.com/ru/post/1264240/


All Articles