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?

It's trying to use the default package location. Review how npm config works, and look [here](https://stackoverflow.com/a/5926706/152997) to find the package you've already installed. (I'd offer a better answer but I've forgotten the specifics, I gave up on the tangled mess that is the JS package world after seeing the vast sprawling dependencies that make up practically every package out there. But I do remember npm config took a fair bit of study before I had everything working right.) — McGuireV10, Mar 10 '18 at 11:09
Oops, thought you were trying to find it after install. Well, in any case, configuring npm should clarify everything for you. It does have the concept of global and local packages that you'll want to consider. — McGuireV10, Mar 10 '18 at 11:10
@AlexeyAndrushkevich Output: PM> npm root C:\Users\LarsHoldgaard\node_modules — Lars Holdgaard, Mar 13 '18 at 14:31
I think the issue is that you are trying to run `npm` from the `Package Manager Console`. Open regular command line application by pressing Win-R and type in `cmd` command. Then in terminal window navigate to your project and then run `npm install` command as you stated above. — Alexey Andrushkevich, Mar 13 '18 at 15:23

Postlagerkarte · Accepted Answer · 2019-07-19T21:26:28.753

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.

Not terribly important or related, really, but have you ever used `Alt+Space` for what it actually does, in Windows? It's the only thing that'll make for an easy recovery when the window gets stuck in a really odd position & you can't grab a corner. Even better, the window position sometimes persists after closing and reopening the app. So ... `Alt+Space` maybe should be left to being a Windows shortcut? — David T. Macknet, Dec 16 '20 at 22:48

Christian Gollhardt · Answer 2 · 2018-03-13T19:39:45.877

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.

Intellisense does not work for me. Any ideas how to enable it? — Tigerware, May 16 '19 at 12:02

Yew Hong Tat · Answer 3 · 2021-02-10T09:15:45.393

11

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

edited Feb 10 '21 at 09:15

answered Mar 30 '19 at 13:59

Yew Hong Tat

644
6
10

1

I get an error "The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program..." – Jeremy Jul 25 '19 at 16:16
5

@Jeremy that problem showed because you haven't install NPM. Click [here](https://nodejs.org/en/) to install nodejs+npm and you will see the command working. – Yew Hong Tat Sep 04 '19 at 14:23
2

NPM already comes installed at "C:\Program Files (x86)\Microsoft Visual Studio\2019\Professional\MSBuild\Microsoft\VisualStudio\NodeJs". Surely you're not saying that we need to install 2 separate NodeJS copies? – AlexPi Dec 20 '19 at 01:00
Not every installation will have nodejs installed by default. It depends on the selection you choose during the installation. If you have nodejs installed in your visual studio folder and it's still not working, you just have to set the environment path pointing to the nodejs folder. – Yew Hong Tat Dec 21 '19 at 02:16
1

@Yew Hong Tat - Is it safe ? :-) Seriously. I see 7 incarnations of node.exe liberally spread :-) under \Program Files*. VS 17 happily installed NodeJs workload, never complaining that nodejs is missing. Even created a new project and then complained :-)) Standalone install brought python v2.7.17 - not looking at all that 3.6 is on the box. and duplicated 3 cmd links under VS (native and cross tools), "Node.js Tools" are non-existent under Tools and your advice is "just add to the path" ? :-) Compare to how smooth Python integration is (Tools submenu, environments (kind of sandbox) ...). – ZXX Jan 31 '20 at 10:30
1

Be sure to restart VS after modifying the path variable – MikeH Jul 06 '20 at 19:58

score 7 · Answer 4 · answered Aug 14 '21 at 11:39

7

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)

answered Aug 14 '21 at 11:39

Alex from Jitbit

53,710
19
160
149

This was easy. I am new to this node and npm stuff everything was going over my head... This saved my day. – Rajshekar Reddy Jul 05 '22 at 07:11

AperioOculus · Answer 5 · 2018-03-13T19:19:10.347

6

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

edited Mar 13 '18 at 19:19

answered Mar 13 '18 at 19:12

AperioOculus

6,641
4
26
37

Any feedback for me as to why this answer was downvoted? – AperioOculus May 19 '20 at 13:55

score 1 · Answer 6 · answered May 13 '23 at 03:33

If you are using an external console alongside Visual Studio, you are probably doing something wrong - the dev process for a project should be all one, or all the other.

Visual Studio has all sorts of integrated package management tools. Let's start with the happy path: installing a front-end library.

From here, you can select the provider, and start typing to find the package you are looking for. Once installed, the files will be ready to be dragged and dropped right into your (cs)html files for easy use.

Here are the full docs for this feature.

Now, the original post requests a solution for an NPM dependency; ideally, you'd want to try to find it by using the first process above to pull it from one of the standard providers, but sometimes the NPM package you are looking for is not provided by any of these providers. In this case, create a package.json file in your project root by following the instructions here. This will install the package to the standard node_modules folder - which Visual Studio will recognize, and display as a dependency under Dependencies. At this point, you can now follow the steps in the first process above, and select the filesystem provider, type node_modules/ in the Library text box, and you should be able to find and install the NPM package you just installed into the standard wwwroot/lib folder location.

Are these images really necessary for the answer? Is your answer accessible to users who cannot load or see the images? Can the images be made smaller? — miken32, May 13 '23 at 03:42

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

6 Answers6

Linked