How do I configure bower with Visual Studio?

问题

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 !

回答1:

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

git for windows – install from https://msysgit.github.io/
node – install from https://nodejs.org/
npm is part of node (no need for any extra step)

Step# 1

Open Command Prompt and execute command

npm install -g bower

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

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

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

Step# 4

To download AngularJs, execute command