8

As complexity of my web project is growing, I am realizing that downloading external JavaScript libraries manually, is error prone, time consuming and making project less maintainable over time.

Although Visual Studio has NuGet package manager, it is not as powerful as bower. Also not all external libraries are being released on NuGet.

But there is no clear help on how to configure bower with Visual Studio. Please help !

Abhinav Bhatnagar
  • 469
  • 4
  • 11

2 Answers2

14

enter image description here

As complexity of my web project grew, I realized that downloading external JavaScript libraries manually, was error prone, time consuming and made project less maintainable over time.

Although Visual Studio has NuGet package manager, it is not as powerful as bower. Also not all external libraries are being released on NuGet.

So, I decided to take the plunge and get started with bower.

My project structure is now much cleaner and easy to maintain.

Here I am listing steps, we need to take to configure bower with Visual Studio.

Detailed steps to use bower are already available on http://bower.io/#install-bower. Here I will list steps, I took to

  • — install bower

  • — configure it with Visual Studio

  • — download a sample package -- ( AngularJS )

Bower requires node, npm and git for windows.

Before proceeding ahead, install the following

Step# 1

Open Command Prompt and execute command

npm install -g bower

enter image description here

Above step may fail, if you are behind corporate proxy server. To add proxy server settings in npm, execute following 2 commands from command prompt

npm config set proxy http://proxy.myCompany.com:80

npm config set https-proxy http://proxy.myCompany.com:80

Once done, try installing bower again

Step# 2

Navigate to your Visual Studio Project folder from Command Prompt.

Execute command

bower init

enter image description here

  • Include this file to Visual Studio project. You may have to click on “Show All Files” from Solution Explorer menu.

enter image description here

Step# 3

Create a .bowerrc file using notepad with following configuration and save it in your Visual Studio Project folder

{
"directory": "scripts/bower_components",
"proxy":"http://proxy.myCompany.com:80",
"https-proxy":"http://proxy.myCompany.com:80"
}
  • Include this file to Visual Studio project.
  • Edit this file to set directory for packages to be downloaded by bower
  • Add proxy server settings if you are working behind corporate proxy. Else remove the last 2 lines for proxy and https-proxy

enter image description here

Step# 4

To download AngularJs, execute command

bower install angular –save

This will add a line in bower.json.

enter image description here

Step# 5

Package will be downloaded under bower_components directory by default. (or under the directory mentioned in .bowerrc file)

Make to sure include the whole package directory in Visual Studio project.

  • Click on Show All Files
  • Right click on new downloaded package and click on “Include in Project”

enter image description here

enter image description here

Step# 6

Finally add reference of new package to your index.html

enter image description here

Abhinav Bhatnagar
  • 469
  • 4
  • 11
  • 7
    6 steps and still not nearly the same functionality I get with Nuget... I really don't see how this is better or more powerful... unless more powerful means "feels like hitting myself with a hammer." – Matthew Whited Oct 29 '15 at 09:03
  • Hi Matthew - For certain Javascript libraries that I was interested in (like Angular UI Grid), were NOT available in nuGet. Hence I chose to use bower. There are several more reasons why bower is being used for managing external Javascript libraries dependencies these days. You can refer to this link - http://simplyaprogrammer.com/2014/06/why-bower-is-better-than-nuget.html – Abhinav Bhatnagar Oct 30 '15 at 16:04
  • 1
    With, ASP.NET 5 and Visual Studio 2015, Microsoft will be using Bower as a client-side package manager. That means that packages like jQuery, Bootstrap and Angular will no longer be referenced using NuGet. More details are available at http://blogs.msdn.com/b/cdndevs/archive/2015/02/17/using-bower-with-visual-studio-2013.aspx . So all these 6 manual steps will NOT be needed in Visual Studio 2015. Bower support will be in built. – Abhinav Bhatnagar Oct 30 '15 at 16:14
  • @MatthewWhited Just compare the number of packages in bowler with client library packages in NuGet... – yakya Feb 06 '17 at 20:46
  • 1
    Just compare the mess that bower makes to your project. – Matthew Whited Feb 06 '17 at 21:00
  • So how do I set the proxy settings for bower globally without having to do that by creating a .bowerrc file manually for every blasted project? – Neutrino Mar 01 '17 at 10:57
  • Worked it out. .bowerrc file can be located in located in user’s home folder (~) c:\users\ on windows. – Neutrino Mar 01 '17 at 11:00
2

I found that I also needed to configure git to use the proxy server :

git config --global http.proxy http://username:password@proxyURL:8080

After that bower worked in VS 2015

DeadlyDan
  • 669
  • 2
  • 8
  • 20