How to use NPM and install packages inside Visual Studio 2017? - asp.net

Question

I have a simple Visual Studio solution, running ASP.NET Core v2 and building a React app.
Now, I want to install a simple component using the NPM. In this particular example, it could be:
npm install --save react-bootstrap-typeahead
I want this package to work just in my solution and nowhere else.
My result:
When I run this, I get the following nice error which obviously makes some sense. If NPM believes it can find my project file at 'C:\Users\LarsHoldgaard\package.json', it's out of luck. The correct path would be C:\Users\LarsHoldgaard\Documents\Github\Likvido.CreditRisk\Likvido.CreditRisk\Likvido.CreditRisk .
npm : npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\LarsHoldgaard\package.json'
At line:1 char:1
+ npm install --save react-bootstrap-typeahead
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : NotSpecified: (npm WARN saveEr...d\package.json':String) [], RemoteException
+ FullyQualifiedErrorId : NativeCommandError
npm
WARN
enoent
ENOENT: no such file or directory, open 'C:\Users\LarsHoldgaard\package.json'
npm
WARN
grunt-sass#2.0.0 requires a peer of grunt#>=0.4.0 but none is installed. You must install peer dependencies yourself.
npm
WARN
react-rating#1.0.6 requires a peer of react#>=0.13.0 but none is installed. You must install peer dependencies yourself.
npm
WARN
react-bootstrap-typeahead#2.5.1 requires a peer of react#^0.14.0 || ^15.2.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm
WARN
react-bootstrap-typeahead#2.5.1 requires a peer of react-dom#^0.14.0 || ^15.2.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm
WARN
prop-types-extra#1.0.1 requires a peer of react#>=0.14.0 but none is installed. You must install peer dependencies yourself.
npm
WARN
react-overlays#0.8.3 requires a peer of react#^0.14.9 || >=15.3.0 but none is installed. You must install peer dependencies yourself.
npm
WARN
react-overlays#0.8.3 requires a peer of react-dom#^0.14.9 || >=15.3.0 but none is installed. You must install peer dependencies yourself.
npm
WARN
react-onclickoutside#6.7.1 requires a peer of react#^15.5.x || ^16.x but none is installed. You must install peer dependencies yourself.
npm
WARN
react-onclickoutside#6.7.1 requires a peer of react-dom#^15.5.x || ^16.x but none is installed. You must install peer dependencies yourself.
npm
WARN
react-transition-group#2.2.1 requires a peer of react#>=15.0.0 but none is installed. You must install peer dependencies yourself.
npm
WARN
react-transition-group#2.2.1 requires a peer of react-dom#>=15.0.0 but none is installed. You must install peer dependencies yourself.
npm
WARN
LarsHoldgaard No description
npm
WARN
LarsHoldgaard No repository field.
npm
WARN
LarsHoldgaard No README data
npm
WARN
LarsHoldgaard No license field.
My thinking:
Being a console noob, I would guess I just needed to change my current folder. But if I run dir, I am in the right folder, and I can see my package.json along with other files.
What is the right way to install components?

Answer 1

To avoid navigating manually to the correct directory use the "Open Command Line" extension from Mads Kristensen. It is available for free in the Marketplace. You find it here.
Once installed you can open a command prompt conviently directly from within Visual Studio.
Tipp: Use the Keyboard Shortcut ALT+Space instead of the context menu to open the command prompt.
You can then run your npm command:
npm install react-bootstrap-typeahead
As a side note: As of npm 5.0.0, installed modules are added as a dependency by default, so the --save option is no longer required.
Update 2019:
Developer Command Prompt and Developer Power Shell are now integrated into Visual Studio 2019 ( 16.2 Preview 2 ) - no need for an extension anymore.
You find them under Tools/Command Line
By default no shortcut is assigned - so you have to do this yourself.

Answer 2

I think the easiest way is to simple use the UI, Visual Studio provides.
Create in the root of your project a package.json (Todo so, right click your project, add item and search for NPM. You will find a npm Configuration File):
{
"name": "SomeName",
"version": "1.0.0",
"private": true,
"devDependencies": {
"react-bootstrap-typeahead": "*"
}
}
Note that * is for the latest version. This is not recommended. Better to specify the version you want. You will notice, that you have support of intellisence for versions and package names.
Everytime you make changes to the json file, simple press CTRL + S. Visual Studio automaticly calls NPM and restores the packages.
For how to use the command line, other have already answerd. But as being a command line noob myself, I prefer this way.

Answer 3

You can use the Package Manager Console to run npm command.
To open the Package Manager Console, go to Tools > Nuget Package Manager and select Package Manager Console and then enter your npm command.
Update:
The latest visual studio 16.8.3 onwards, you will find the terminal built into visual studio.
You can find it by right-clicking at your solution or a shortcut Ctrl + `:

Answer 4

In Window's Explorer, navigate to where the package.json file is located in your project.
Create a folder named node_modules in the same directory as your package.json file
While holding the left [Shift] key, right click in the folder containing the project.json file.
From the context menu select 'Open command window here'.
Input your npm command npm install --save react-bootstrap-typeahead

Answer 5

I use a different approach, configuring npm per SOLUTION, instead of per PROJECT.
Please refer to my BLOG:
A better way to use Visual Studio with npm ( and Gulp )
It is working fine and you may use Command Line ou Package Manager Console do install/update/uninstall npm packages.
I am currently using it with Visual Studio 2019 and ASP.NET Core MVC.

Answer 6

Adding my 2 cents from 2021.
Visual Studio comes with built-in npm support, no CLI required. VS can automatically install/restore packages in the background - on project open and/or after making changes to packages.json file. You can enable this here:
For example, here's an article about configuring automatic minification and compilation for js/css files via npm tool, using just naked Visual Studio (DISCLAIMER: I wrote that blog post myself last year)