How can I use Bower as a package manager with Visual Studio 2013? I.e. I have a .NET project and want to add some packages uses Bower

6
votes

How can I use Bower as a package manager with Visual Studio 2013? I.e. I have a .NET project and want to add some packages uses Bower.

I read Scott Hanselman's post, but it's not clear. I installed the plugins. Do I use the package manager console? Do I add bower as a package source?

My project already has a package.json.

If I open the VS command window and type bower, I receive the message: Command "bower" is not valid.

1
visual-studiovisual-studio-2013bowerbower-install
If you installed bower properly, try the powershell console. That works for me, although I have no idea why. Magic, I suppose. – user1228
Do I need to install bower from the NuGet package manager? I find it confusing that I'd need one package manager to use another. I installed it locally using NPM – Hoppe
I first installed node with default settings. Then git, with the "https://".insteadOf git:// config setting. Then I installed bower (and gulp) via NPM. Bower "works" in powershell; I'd suspect it is some config setting but I have no idea. The gulp extension for VS works for me as well. I'm no expert in this, but I did get it all working (kind of)... – user1228

1 Answers

7
votes

If I am correct, the task explorer is only there to automate build tasks for you, combined with grunt. Getting NPM, Bower and Grunt are all manual steps you need to do for your project via the command line. After you installed the stuff from Hanselmans blog, you have to start with installing NPM for your project, then you add bower and grunt via NPM. DO the following:

  • Open a command line and navigate to your project folder (mine is located in c:\dev\WebProject1)
  • on the command line run: npm init and fill out the questions (name, description etc.)
  • You are now ready to install bower. Install bower via nuget: npm install bower -g
  • and initialize bower for your project (still in the command line), type: bower init enter and fill out your project defaults
  • finally install your package with bower: bower install angular --save

When that's done, you can include the generated files in visual studio (package.json and bower.json) and link the files in your index.html page 

<script src="/bower_components/angular/angular.js"></script>

The visual studio tools are only ment to edit the bower.json and package.json within visual studio. You then only have to run bower install to install new or changed packages

If you then want to automate some build tasks you can start with grunt to automate some stuff. Ref:start with Grunt

edit 1: I came across this post from John Papa. Gets you up and running in a breeze John Papa: Up and running with NodeJS ....