Node.js and NPM introduction for Visual Studio 2015

As the Node.js development is getting popular, Microsoft introduced new Node.js Tools for Visual Studio 2015 to support Node.js development. A lot of traditional .Net developer started to leverage a lot of open source library from Node.js ecosystem for their daily development work. Since Node.js is a JavaScript base environment, there is a learning curve for those developers who came from .Net stack. I think it would be helpful to write an article which layouts some basic concepts and configuration from .Net developers perspective and help them to adapt the Node.js environment better.

Configure the Visual Studio to use the latest node.js

When Microsoft introduced Node.js Tools for Visual Studio, it actually installed a delegated Node.js environment for the Visual Studio in the following directory.

C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External

The developers are able to leverage Node.js features without installing the Node.js. It seems a cool feature, however it actually introduced a versioning issues. You cannot leverage the latest Node.js feature from Visual Studio because VS is always point to that folder for Node.js

You can go to that folder and run the follow command to check the node.js version or go to Visual Studio Package Manager Console to type the same command. You will find out that the node.js version which Visual Studio is using is v0.10.31 which is different than v6.9.2(by the time I wrote this article)

I think the questions a .Net developer would like to ask are how are we going to upgrade Node.js to the latest version and how can Visual Studio be able to use latest Node.js? To find out the answer, you need to understand how Visual Studio 2015 uses Node.js. As Node.js Tools for Visual Studio 2015 is installed, the Node.js is reference as a Web External tools defined under “C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External” folder. This folder is configured under Tools -> Options->Projects and Solutions->External Web Tools settings. The below steps mention how to change Visual Studio 2015 to use the latest Node.js.

1. Download and install the latest Node.js from https://nodejs.org/en/download/. By default Node.js is installed at “C:\Program Files\nodes”.
2. Go to Visual Studio 2015 menu and click Tools -> Options->Projects and Solutions->External Web Tools settings. Add a new folder and point to your Node.js installation folder. For this case, it will be “C:\Program Files\nodes”. You also have to make sure this path is on the top of the list because Visual Studio 2015 will read them based on the order of them.

3. Restart your Visual Studio 2015 and type node -v under Package Manager Console, you will find out that your Visual Studio 2015 is using the latest Node.js.

4. Since NPM is part of Node.js, your NPM is upgraded to the latest. You can “npm -v” to check the version at “Package Manager Console” window.

Create and Understand package.json

Once you followed the above steps, you should have the latest Node.js and NPM ready for your Visual Studio 2015. If you came from .Net stack, you might not feel comfortable when you first look at NPM because the first the NPM is a command tool and not like NuGet Package which provides a windows to allow us to search and select which package you want. The second NPM relies on package.json to manage all packages. In order to leverage NPM, you first need to understand package.json file. From Using a package.json, it actually helps you manage what packages you project depends on, allows you to specify the version of a package and makes sure your build reproducable. When you first look at package.json, it includes a set of properties. The following mentioned a summary. You can always check the detail from NPM website.

• “name”: project name, all lowercase, one word, no spaces, dashes and underscores allowed.
• “version”: in the format of x.x.x
• “dependencies”: these packages are required by your application in production
• “devDependencies”: these packages are only needed for development and testing

Let’s create a package.json for your project. There are couple ways you can create this file:

• Go to the “Solution Explorer”, right click the project you want to add package.json and select “Add”->”New Item”, type “npm” at search box, you will see “NPM Configuration file” show there.
• Activate the “Package Manager Console” windows and go to the project folder and type “npm init”. Package.json will be created after a few prompt questions.

List and Install Package

It is very straightforward to add package through npm, all you need is the package name. You can go to https://www.npmjs.com/ to find out your package name. Once you have the package name, you can use the following steps to add in package.json either directly or from command line or “Package Manager Console”.

• Open up the package.json and type the following on “dependencies” or “devDependencies” sections which depends how you use the package. Once you save it, Visual Studio 2015 will automatically install those packages.

“dependencies”: {
“angular”: “¹.5.8”,
“angular-route”: “¹.5.8”,
“bootstrap”: “³.3.7”,
“jquery”: “³.1.1”,
“moment”: “².16.0”
},
“devDependencies”: {
“@types/angular”: “¹.5.19”,
“gulp”: “³.9.1”
}

• Activate the “Package Manager Console” window and type the following command to install the package

#install package to “dependencies” section. You can install multiple package by adding space.
npm install angular — save
#install package to “devDependencies” section
npm install angular — save-dev
#install package to global
Npm install [packagename] -g
#install a specific version at local.
npm install [packagename]@1.8.2
#upgrade a local package
npm update [packagename]

Once you run above command, the installed package and dependencies are located under [project folder]\node_modules.

If you want to list package information, for example the version and location, you can try the following commands.

#list package infomration
npm list [packagename]
#list global package information
npm list [packagename] -g

Configure NPM

You might need to know and configure your NPM’s settings. The following command line shows you some NPM configuration example like proxy setting.

#list npm configuration setting
npm config list -l
#get proxy and https-proxy information
npm config get proxy
npm config get https-proxy
#set proxy
npm config set proxy http://[domain]%5C[username]:[password]@proxyserver:port
npm config set https-proxy http://[domain]%5C[username]:[password]@proxyserver:port
#you can run ping to check if NPM is able to communicate to registry. If return is a {} which means communication is #good.
npm ping

One thing I want to mention here is if your proxy needs a domain account for authentication, you need to follow the http://domain%5Cusername:password@proxyserver:port format.

If you web access needs proxy, sometime, NPM cannot resolve the https address from proxy, for this case, you can switch to non-https

Go to “Package Manager Console” and type the following command to disable SSL and use non-https npmjs registry URL.

Npm config set strict-ssl false
Npm config registry http://registry.npmjs.org/

Once you get familiar with NPM, you are able to leverage node.js ecosystem for your development work. For more detail usage of NPM, please check out NPM Document