How to use NPM and install packages inside Visual Studio 2017?

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.