How do I configure bower with Visual Studio?

Question

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 !

Answer 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

bower install angular –save

This will add a line in bower.json.

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”

Step# 6

Finally add reference of new package to your index.html

---

Answer 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