How to use Bower (installed from nuget) in Visual Studio?

Question

I am trying to use bower inside Visual Studio 2013.

First I installed bower (not bower.js) via nuget's Package Manager Console.

Then I thought I could simply type

PM> bower init

inside the PMC to generate the bower.json.

But then it gave me this error.

bower : The term 'bower' is not recognized...

PS. The path of the PM> is pointing to C:\MyWebProject\MyWebProject\.bin.

What am I missing here??

Sarene

Related post - How to use bower packages in Visual Studio 2017 – Sudatorium

Answer 1

1. Open the command prompt
2. Navigate to web project folder
3. Run bower init
4. You should have bower.json created by answering all answers on the cmd prompt.

Prisoner

Hey thanks! This worked! I assumed I could use PMC so everything would be added automatically. Looks like I have to use command prompt and manually add the downloaded folders into the project. But that's OK. Oh btw you seem to have posted two answers. Just so you know that you could simply edit your original answer rather than creating another one! :)I will flag it just to notify ppl to get rid of it. Cheers! – Sarene

Just a note for others. To be able to run 'bower init' in the command prompt (well I used powershell), I also had to. 1) install NodeJS on Windows (not sure if Git is needed too, I already had that installed on Windows) 2) run "npm install -g bower" in the command prompt. This link was helpful: baconapplications.com/running-bower-grunt-in-visual-studio-2013 – Bohemianism

3) 'bower init' can be run now in your web project folder, and then the bower.json file is generated 5) drag bowjer.json into your VS project. 6) Now I edited bower.json in VS using the help of Package Intellisense mentioned below. 5) Right click bower.json in VS, there will be a 'Bower install packages' option in the context menu (not sure if Grunt Launcher is neccessary for this), which will download all packages in bower.json. 6) drag & drop the generated bower_components folder into your VS project – Bohemianism

It seems pretty silly that I can manage bower packages from within Visual Studio, but not run bower init. – Gearalt

Answer 2

Srinivas accurately described the steps needed to get you started with a bower.json in your root folder, which is where you want to start. You now have two main tasks:

1. Define dependencies - use Package Intellisense.
2. Install dependencies - use Grunt Launcher. They will be installed to the bower_components folder.
3. Reference dependencies - simply add them to you project (as links).

For more information see Introducing Gulp, Grunt, Bower, and npm support for Visual Studio.

Note that Visual Studio 2015 (currently in preview) has built-in, first-class support for all of the above: Manage Client-Side Web Development in Visual Studio 2015, Using Grunt and Bower.

Pension

You got it! It took me a while to figure out the workflow and I didn't see it spelled out anywhere. – Pension

Let's say I start using Bower packages this way in Visual Studio 2013. If I switch to Visual Studio 2015 once it's released, will it recognize & properly handle my already installed Bower packages? – Bohemianism

@Bohemianism I believe it will, or it will be trivial to set it up to do so. bower.json is just a file on the disk (I don't think it is referenced anywhere e.g. a .csproj file), and VS2015 recognized it. – Pension