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??
Open the command prompt
Navigate to web project folder
Run bower init
You should have bower.json created by answering all answers on the cmd prompt.
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:
Define dependencies - use Package Intellisense.
Install dependencies - use Grunt Launcher. They will be installed to the bower_components folder.
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.
Related
I'm trying to do some TypeScript tutorials but I'm hitting a weird problem. A while back I installed TypeScript 1.0.3.0 through Visual Studio here:
C:\Program Files (x86)\Microsoft SDKs\TypeScript
On the command line, when I check the TypeScript version it references that. I wanted to do some Angular (Angular version 2/4) so I loaded Node Package Manager and installed TypeScript through NPM. NPM loaded a newer version of TypeScript in another place on my computer. When I create Angular projects using Angular's CLI tool it somehow uses the NPM install. When I want to do simple, bare-bones TypeScript tutorials it uses the older version 1.0.3.0.
I lost my MSDN license so I can't run Visual Studio anymore. How do I update TypeScript that is in the Microsoft SDKs folder? Every Web site I check on installing or updating TypeScript tells me to use NPM.
If you don't plan to use it uninstall it, if you check Window uninstall software console panel page, you should find an item relating to that install.
If it's not there the simplest way would be to remove the old Typescript folder from your path variable (see here how to edit if you are not familiar). Look for the C:\Program Files (x86)\Microsoft SDKs\TypeScript folder and just remove it.
Then install the latest Typescript from npm.
When using npm in Visual Studio with NTVS, what are the options that are in effect? How do I apply --save or -g?
Will it corrupt the Visual Studio project in anyway if I were to run npm outside of Visual Studio on the command line directly?
I can't say anything about ntvs, because I've never used it. But when we are talking about standard Package Manager Console Window:
npm install [packageName] - installs packages locally (analogue to --save option);
npm uses package.json file of the selected project;
to understand weather using npm outside of Visual Studio will corrupt your project or not, you should know this:
there may be several installations of npm (and node.js) on your machine. Node.js installer stores its packages in "*C:\Program Files\nodejs*" path by default and sets up the system PATH variable with this value. When you install packages via -g option, they are stored in "%APPDATA%/npm" path.
So, when you use npm outside of Visual Studio, system console will apply to the version of npm/nodejs which is stored in the PATH variable.
To make sure that you use the same version of npm in Visual Studio, open Tools/Options => Projects and Solutions/External Web Tools option. Visual Studio will use locations of external tools by the order, as they are located in the list.
You can add PATH variable and put it in the first place to use the same version as you system.console does:
at this picture VS will use PATH variable, while "$(VSINSTALLDIR)\Web\External" and "c:\Program files\nodejs" will be ignored (although, I have redundancy here, because, my system PATH variable contains "c:\Program files\nodejs" as well).
You can also check version of each npm installed on your machine. Just run "npm -v" in VS package manager console, and run it in your system console.
I have the same version for them because of my preferences:
node -v
v7.8.0
But when I run this command opening cmd at $(VSINSTALLDIR)\Web\External path, I get an older version:
hope this helps =)
Context:
I am configuring my ASP.NET 4.x project to use bower to manage client side packages, using VS 2015 Update 2. (I am following this stackoverflow guide/answer
All cool. However after created bower.json, and seeing output I've noticed the following output line:
"C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\Bower.cmd" install --force-latest
This means that VS does not even use the npm installed bower (which is under the
/node_modules/bower) instead launching some globally installed (it was not me) bower.
Question:
What else npm can be used in Visual Studio 2015 ASP.NET project especially besides of installing bower?
In case of the answer is nothing, Question 2:
Can I just eliminate npm (package.json), and rely my bower.json in the Visual Studio project (and delete /node_modules)
The whole scenario also begs for the Question+:
Where should I configure Visual Studio to use the npm installed bower instead of the existing "global" installation in C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\Bower.cmd
npm can also be used to install packages for Gulp or Grunt tasks, which can then be run by the Task Runner Explorer in VS 2015.
You can configure Visual Studio to use a different version of Bower in Tools->Options->Projects and Solutions->External Web Tools. Move $(PATH) to the top of the list to use a globally installed version, or add a new project-relative path to the top of the list.
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.
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 ....
I'm working on a NuGet package that installs a bunch of content - views, scripts, CSS files - into a web application, and trying to improve the change-compile-test cycle. I have two projects - the framework itself ("Package") and the demo web app that consumes it ("Website")
What I need to do as part of the Visual Studio build process is:
(as part of Package post-build) Nuget pack Package.nuspec -OutputDirectory ..\pkg\
(as part of Website pre-build) Nuget uninstall Package
(as part of Website pre-build) Nuget install package -source ..\pkg\
The problem is - there doesn't seem to be any command-line equivalent of doing Uninstall-Package from the NuGet Package Manager console. Am I missing something?
No there isn't currently.
Also, nuget.exe install doesn't really install anything. What nuget.exe install really does is nuget.exe restore: it restores the extracted package in the output directory. It doesn't run the PowerShell hooks (e.g. install.ps1) and it doesn't modify any target project (as there's none being targeted).
There is a way but using neither Visual Studio nor NuGet.exe. Using a custom build of SharpDevelop you can install and uninstall NuGet packages from the command line and have their PowerShell scripts run.
This custom build of SharpDevelop and its NuGet addin allows you to run the commands, such as Install-Package and Uninstall-Package, from PowerShell but outside of Visual Studio.
The limitations are that it needs SharpDevelop to be available and it also does not support any PowerShell scripts that are Visual Studio specific.