How to use bower packages in Visual Studio 2017

Question

Face two difficulties with bower package manager in vs2017

1. In Visual Studio 2017, can not find any .bowerrc file under bower.json, so how to set the directory property? After Installation via Manage Bower Packages UI, packages store files in bower_components folder

2. How to use those packages, as in previous versions like VS 2013 write syntax in BundleConfig.cs to manage client packages like below. Now in VS 2017, how to use those packages in a C# Core 2 ASP.NET MVC project?

BundleConfig.cs:

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/bower_components/jquery/dist/jquery.js",
                    "~/bower_components/jquery-file-upload/js/vendor/jquery.ui.widget.js",
                    "~/bower_components/jquery-file-upload/js/jquery.fileupload.js",
                    "~/bower_components/jquery-file-upload/js/jquery.iframe-transport.js")); 
    }
}

Solution 1

I had the same issue.

In the same folder as your bower.json file create the file called .bowerrc. Inside it paste:

{
  "directory": "wwwroot/lib"
}

Solution 2

Right click your project solution -> Add New Item -> select Web on the left -> select Bower Configuration File on the list -> Add

Now you can install new bower package by right click your solution -> manage bower package.

More details below:

Solution 3

As an alternative to the suggestions of manually creating the bower.json file which will start out empty:

• In Visual Studio right-click the Web Application project and choose Open Command line > Default (CMD), Developer Command Prompt or PowerShell.

• If you don't have bower installed run the command npm install -g bower in the command prompt (requires npm).

• Run the command bower init and follow the instructions which will create the bower.json file.

If you answer yes to set currently installed components as dependencies ? and you already have packages installed in the bower_components folder it will automatically add them as dependencies in the bower.json file.