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 dependenciesapp.js – our simple node.js stuff a javascript filepackage.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:
- A command window invoked – this is telling node server is running on port 5858
- 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)
