65.9K
CodeProject is changing. Read more.
Home

Pictorial Step-by-step discussion of Nodejs tools for Visual Studio

Gaurav Aroraa
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.50/5 (5 votes)

Apr 10, 2015

CPOL

8 min read

viewsIcon

33381

downloadIcon

563

This article is discussing about great release of Nodejs tools for Visual Studio.

Contents

 

Introduction

On November 24, 2014 there is a release of powerful tools of Node.js for Visual Studio. This tool has latest great features which enables the powerful Node.js for your Visual Studio.

What is Node.js?

Node.js is a tool for Visual Studio which enables Node.js working experience with your Visual Studio.

How can I install Node.js?

Here are the following steps guide how we can install Node.js tools for Visual Studio. Please note that in this article we are using Visual Studio 2013 Update4.

Let’s Start Creation of a Simple App

In this post we will use inbuilt templates to start building simple apps

Pre-requites

To implement and play with the source code, one should have:

  • Visual Studio 2013 or later
  • Node.js Tools for Visual Studio
  • Basic knowledge of Node.js

Create Skeleton/Empty ASP.Net project

  • Open Visual Studio 2013
  • Select File->New->Project (or enter Ctrl + Shift + N)
  • Under Installed Templates Select Javascript -> Node.js

Discussing Node.js templates

Lets discuss available templates, these may be exceeds or decrease as per your custom installation or add-ons:

From Existing Node.js code

If you have ever created Node.js application and want to taste the flavor of Visual Studio you can also use this template. So, no need to do any special things, just choose this template, select the path of your existing Node.js app and you’re ready with application.

Blanks Node.js Console Application

This template creates an empty application just a skeleton for you with simple app.js having a single line:

console.log('Hello world');

Lets give a hand-on with this template to know more about this:

Take a look into above image,

  • Do not select ‘Create directory for solution’
  • Do not select Add to source control [if you want you can]

Click ok to get the application routed.

First file you can see with following code:

console.log(‘Hi everyone!’); 
setTimeout(function(){ 
},3000);

 

Just run the application [F5] you can see your console window appears and disappear so quickly and you cannot see the expected output.

Lets re-write above code (we saw in app.js) so, we can hold our console window for a moment:

In above snippet just add the time our function to hold our window for 3000ms.

Great thing now, we can see the output:

 

Folder Structure

Lets take a look into folder structure:

 

 

Here you can see that our console app consists

  • npm – all Node.js dependencies
  • app.js – our simple node.js stuff a javascript file
  • package.json – all about configuration, project details, version and author details  etc.
  • README.md – a normal readme file
Install/Update Node dependencies

Just right click on project from Solution explore and click on Open Command Prompt

In command prompt type ‘npm install’

It will install all dependencies required for project:

Alternatively expand ‘npm’ node from Solution explore and right click -> choose Update Install Package(s), it will update all packages with latest.

Also, you can do it by opening a npm install window above option (ctrl K,P):

 

Blanks Node.js Web Application

Now, lets try another node.js template. Close existing solution or just add a newer one and choose Blank Node.js Web Application template.

 

The first file will open after above action:

 

 

Run application hit F5. You will see two things happened:

  1. A command window invoked – this is telling node server is running on port 5858
  2. A web browser invoked with a output from server.js file (this is a default project file)

Folder structure

You can find similar folder structure as we noticed in node.js Blank console app

 

Visual Studio Intellisence Experience

Lets try with writing something in server.js file, you will notice that you get Visual Studio typical intellisence

So, you can get the flavor of all Visual Studio things same like you were taking while working with other languages like C#/asp.net etc.

 

Basic Node.js Express 3 Application

This template provides the facility to create a basic Node.js app with Express 3 packages

During above operation you can see following dialog

So, your project is having all dependencies which is defined in Package.json file.

If you clicked yes, you will definitely see the following message on Visual Studio status bar

Which tells us about the installing package. The amazing thing is this process happen in the background, which means you can work with your task at the same time. If you clicked ‘No’, don’t worry you can still install the packages just open the Command Prompt by right clicking project name from solution explorer and just type ‘npm install’ and hit enter.  

 

Folder Structure

Take a look into folder structure:

 

In above you can see various folders containing different files. You can see views, routes, public etc. In this article we are not going to discuss everything in details, we will do this in coming Node.js series of articles.

Running the application

Run the application hit F5 and you will see:

  • Command window

  • Web browser

  •  

     

Analyzing app.js

Lets take code lines which were added by default template.

​

Above code tells the node.js that these modules are required to run this app.

 

It will initialiase our express.js function.

This will only happened in development environment.

First line will tells the main/home page and second will give is the response of our resource.

 

 

 

Debugging App

Put a break point somewhere in your app.js file.

Run the App hit F5, see when it hits the break point.

Great thing is that you can see the breakpoints in Visual Studio Breakpoints window:

Here is the Call Stack window, contains all the things.

You can find the local variables and functions in your Locals windows.

Isn’t it an imagine tool :)

There are more templates – we are not going to discuss all here, we will discuss and create a separate application using these templates in our coming Node.js article series. Till then enjoy the flavor of this new Node.js tools for visual studio.

Node.js Interactive Window

You can find this Window similar to Visual Studio Command Window:

Go to Tools->Node.js Tool->Interactive Window. Alternatively press Ctrl+K,N

 

In this window you can play with all Node.js commands, this is one of the powerful window, I ever find. If you have some confusion just type .help and you will get a list of commands:

Lets play with few of commands.

Did you remember we have created a console app?

Here we can get the similar output. Did you notice ‘undefined’ ? What was that?

In above, we just defined a function ‘letsTryThis’. This is a simple Javascript function. You can think how to run it from within the same window, lets try and call that function:

Wow, it works. One more great thing you can get the History by pressing up or down error keys. So, enjoy the power of Node.js Interactive Window.

Diagnostic Info

You can get all info about your current node.js app (please note that info depends upon your current node.js app). Go to Tools -> Node.js Tools ->Diagnostic Info.

 

Discussing features of Node.js tools for Visual Studio

Lets discuss few of great features of Node.js tools for Visual Studio

Visual Studio – IDE Flavor with Node.js tools

With the installation of this tool we can get all the flavor of Visual Studio IDE, we can see

  • Intellisence
  • AutoComplete
  • Signature help

Debugging experience

With this great tool we can put a break point and DEBUG the application similar to other application can run on Visual Studio.

TypeScript support

Node.js tools for Visual Studio comes with the support of TypeScript you can write your things using TypeScript.   In above, we have almost tried to attempt all the features with valid examples. In coming sessions we will create whole application following great patterns.

Conclusion

At last we will get the great thing Node.js tools for Visual Studio, it provides all flavor of Visual Studio to develop Node.js applications. This tool has many great features, it provides great Node.js templates.

History

Initial release 04/10/2015 (using NJTVS RC1.0)