Click here to Skip to main content
15,391,634 members
Articles / Visual Studio / Visual Studio 2013
Tip/Trick
Posted 9 Apr 2015

Tagged as

Stats

28.6K views
545 downloads
14 bookmarked

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

,
Rate me:
Please Sign up or sign in to vote.
3.50/5 (5 votes)
9 Apr 2015CPOL8 min read
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

    Image 4

Discussing Node.js templates

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

Image 5

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:

JavaScript
console.log('Hello world');

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

Image 6

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:

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

 

Image 7

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:

Image 8

 

Folder Structure

Lets take a look into folder structure:

Image 9

 

 

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.Image 10
  • README.md – a normal readme file
Install/Update Node dependencies

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

Image 11

In command prompt type ‘npm install

Image 12

It will install all dependencies required for project:

Image 13

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.

Image 14

 

The first file will open after above action:

Image 15

 

 

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

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

    Image 17

Folder structure

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

Image 18

 

Visual Studio Intellisence Experience

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

Image 19

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

Image 20

During above operation you can see following dialog

Image 21

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

Image 22

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.  

Image 23

 

Folder Structure

Take a look into folder structure:

Image 24

 

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

    Image 25

  • Web browserImage 26

  •  

     

Analyzing app.js

Lets take code lines which were added by default template.

Image 27

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

Image 28

 

It will initialiase our express.js function.

Image 29

This will only happened in development environment.

Image 30

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

Image 31

 

 

 

Debugging App

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

Image 32

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:

Image 33

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

Image 34

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

Image 35

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

Image 36

 

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:

Image 37

Lets play with few of commands.

Image 38

Did you remember we have created a console app?

Image 39

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.

Image 40

Image 41

 

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)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Authors

Mahsa Hassankashi
Doctorandin Technische Universität Berlin
Iran (Islamic Republic of) Iran (Islamic Republic of)
I have been working with different technologies and data more than 10 years.
I`d like to challenge with complex problem, then make it easy for using everyone. This is the best joy.

ICT Master in Norway 2013
Doctorandin at Technische Universität Berlin in Data Scientist ( currently )
-------------------------------------------------------------
Diamond is nothing except the pieces of the coal which have continued their activities finally they have become Diamond.

http://www.repocomp.com/

Gaurav Aroraa
Architect
India India
There is no age limit for learning and its never late, to start.

Comments and Discussions

 
QuestionMessage Closed Pin
29-Sep-20 0:58
MemberMember 1494964829-Sep-20 0:58 
QuestionWhen are you going to update the article with updated version of NodeJs Tools? Pin
Shuby Arora12-Aug-15 11:01
MemberShuby Arora12-Aug-15 11:01 
AnswerRe: When are you going to update the article with updated version of NodeJs Tools? Pin
Gaurav Aroraa13-Aug-15 4:18
professionalGaurav Aroraa13-Aug-15 4:18 
SuggestionA complete video tutorial is here Pin
jagadish_chatarjiiiii20-Jul-15 11:07
Memberjagadish_chatarjiiiii20-Jul-15 11:07 
GeneralMy vote of 5 Pin
Mahsa Hassankashi1-May-15 12:49
MemberMahsa Hassankashi1-May-15 12:49 
GeneralRe: My vote of 5 Pin
Gaurav Aroraa1-May-15 23:41
professionalGaurav Aroraa1-May-15 23:41 
GeneralGreat to get this series with a pictorial representation Pin
Shuby Arora13-Apr-15 4:47
MemberShuby Arora13-Apr-15 4:47 
GeneralRe: Great to get this series with a pictorial representation Pin
Gaurav Aroraa13-Apr-15 20:20
professionalGaurav Aroraa13-Apr-15 20:20 
Questionhave you consider to post this as a tip? Pin
Nelek12-Apr-15 9:38
protectorNelek12-Apr-15 9:38 
AnswerRe: have you consider to post this as a tip? Pin
Gaurav Aroraa13-Apr-15 20:22
professionalGaurav Aroraa13-Apr-15 20:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.