Add Bower Packages in Visual Studio Asp.net core 2.1

README.md

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.