19

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")); 
    }
}

enter image description here

shamim
  • 6,640
  • 20
  • 85
  • 151
  • Related post - [How to use Bower (installed from nuget) in Visual Studio?](https://stackoverflow.com/q/26521889/465053) – RBT May 27 '18 at 07:42

3 Answers3

21

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"
}
Liam
  • 1,161
  • 12
  • 24
9

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:

enter image description here

RBT
  • 24,161
  • 21
  • 159
  • 240
AnhNguyen
  • 99
  • 1
  • 3
  • 6
    Previous versions of .NET core web application template include bower.json by default when creating new projects but .NET Core 2 seems to have removed this file and it must be created manually as this answer suggests to make bower work correctly. – Nathan Dec 04 '17 at 18:40
  • 8
    Cannot find this in latest Visual Studio 2017 (15.6.4)! – Marcel Mar 23 '18 at 08:04
  • @Marcel you might want to check [this](https://stackoverflow.com/a/50549865/465053) answer. I faced the very same issue as you. Hope this helps! – RBT May 27 '18 at 07:16
5

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.

Mohsen Esmailpour
  • 11,224
  • 3
  • 45
  • 66
MartinF
  • 5,929
  • 5
  • 40
  • 29
  • Not sure why I don't see the `Open Command line` option in the context menu. Then I opened `Command window` from `View menu` > `Other windows`. Still, `node --version` or `npm --version` commands were not getting detected at all. I'm using Visual Studio 2017. Rest other instructions worked for me. I followed [this](https://stackoverflow.com/a/26521928/465053) post to go past step 1. – RBT May 27 '18 at 07:49
  • Bower has been deprecated and it is recommended to use other package managers. – MartinF Jun 17 '18 at 12:30