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
 [email protected] requires a peer of grunt@>=0.4.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of react@>=0.13.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] 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
 [email protected] 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
 [email protected] requires a peer of react@>=0.14.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of react@^0.14.9 || >=15.3.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of react-dom@^0.14.9 || >=15.3.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of react@^15.5.x || ^16.x but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of react-dom@^15.5.x || ^16.x but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of react@>=15.0.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] 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?

Solution 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.

Solution 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.

Solution 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 + `:

Solution 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

Solution 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.

View more solutions