How to configure Visual Studio 2015 with the latest version of Node.js and NPM

Introduction

I recently installed Visual Studio 2015 Update 2 in order to work in a project, in which, we would like to use a combination of different technologies like SharePoint, React, Node.js, LESS and Gulp.

In my opinion, is good to to use new technologies at the right time, in terms of, learning curve, adoption and maturity. And now, I think is the right time for SharePoint developers to introduce little more technologies like Node.js and Gulp in our projects, which will help us on saving lot of development time.

Node.js

I was quite surprised when I first saw Node.js because even if it is only a JavaScript runtime implemented to run in a server. It has huge success in the development world because JavaScript is the common and shared language between all web developers. Which means that there is a lot of people involved on developing custom libraries and modules. Due to its success, there is a great package ecosystem called NPM (Node Package Manager) to help contributors to publish libraries and developers to use them. See more info here: https://nodejs.org. I recommend to read this book as well:

Buy this book…

NPM

It is the largest ecosystem of open libraries in the world, doesn’t matter if you are Java, PHP, C#, VB or ASP .Net Developer! That means that there is a los of modules and open libraries already implemented just ready to use them.

As a SharePoint and Web Developer one example that will make you to love NPM free libraries is Gulp, that is a tool that helps you out with several tasks when it comes to web development. It’s often used to do front end tasks like:

YES!! We can have a good way to automatize all the web compilers, bundlers, optimizers and uploaders when we work in SharePoint projects, which is really good in terms of productivity.

Visual Studio 2015 Integration with NPM

By default Visual Studio 2015 knows what NPM is, I mean, Visual Studio 2015 ships with it’s own version of Node.js and NPM. The OOTB version of NPM is located here: C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm\node_modules\npm\bin

image

The bad thing here, is that VS uses an OLD version of NPM, and I HIGHLY recommend to use latest version of Node.js and NPM. For me the primary motivator was the path length limitations in Windows. Nested node_modules folders buried 19 levels deep is no fun when you hit the max path length. The latest major version of NPM– version 3.0.x and above – creates a flat store of packages.

Using native VS 2015 Update 2 NPM version

clip_image001

Using NPM 3.8.6 downloaded from nodejs.org (installed via Node.js executable)

clip_image002

Thanks Fran for helping me on this!

Upgrade NPM in Visual Studio 2015

  1. Install in your development environment the latest version of Node.js that includes NPM: https://nodejs.org. In my case (May 2016) it is v6.0.0. image Check that NPM is installed as well: image After install it, you can see the version for both tools, just typing: image

  2. Now change “Locations of External Tools” configurations in VS 2015 in order to tell VS to use the latest version of NPM: Configure it in Options > Project and Solutions > External Web Tools

    Just add a new entry and move it to the top. NPM is located in the Node.js install directory:

    clip_image0015

    Note may need to restart Visual Studio for the tooling paths to be picked up.

How can we check our VS 2015 is using version 3.8.6

VS 2015 automatically runs NPM every time we save changes in the package.json file at the root folder of our project (SharePoint project as well). Try to crate package.json in your project root directory, save it and you will see in the output called “Bower/npm”:

image

Here an example of package.json file:

You also can see how “node_modules“ folder has been created in your project folder:

clip_image0017

Conclusion

  • If you are using NPM version 3.X.X then you should have a flat store of packages in node_modules, which means no more node_modules subdirectories. You should appreciate a improvement on performance,

  • You don’t need extra configuration to run NPM, the only thing to do is create package.json file in you root directory and when you save it an event is triggered to evaluate using the pre-configured NPM version.

  • NPM is really good accepted in the development community and you have a lot of information around Internet, just google it!

  • There are some good articles and courses from John Papa: http://www.johnpapa.net/get-up-and-running-with-node-and-visual-studio/

 

Author: José Quinto
Link: https://blog.josequinto.com/2016/05/04/how-to-configure-visual-studio-2015-integration-with-latest-version-of-node-js-and-npm/
Copyright Notice: All articles in this blog are licensed under CC BY-SA 4.0 unless stating additionally.