[转]Getting Start With Node.JS Tools For Visual Studio

本文转自:http://www.c-sharpcorner.com/UploadFile/g_arora/getting-started-with-node-js-tools-for-visual-studio/

Table of contents 1. Introduction 2. What Node.JS is 3. How to install Node.JS 4. Let's Start by Creation of a Simple App

  • Pre-requites
  • Create Skeleton/Empty ASP.Net project
  • Discussing Node.JS templates
    • From Existing Node.JS code

      • Blanks Node.JS Console Application
        1. Folder Structure
        2. Install/Update Node dependencies
      • Blanks Node.JS Web Application

        1. Folder structure
        2. Visual Studio Intellisence Experience
      • Basic Node.JS Express 3 Application
        1. Folder Structure
        2. Running the application
        3. Analyzing app.JS
        4. Debugging App
      • Node.JS Interactive Window
      • Diagnostic Info
      • Discussing features of Node.JS tools for Visual Studio
        1. Visual Studio IDE Flavor with Node.JS tools
        2. Debugging experience
        3. TypeScript support

5. Conclusion
Introduction

On November 24, 2014 there was a release of powerful tools, Node.JS, for Visual Studio. This tool has the latest great features that enable the powerful Node.JS for your Visual Studio.
 
Today, March 25, 2015 there is an announcement for general availability of Node.js Tools 1.0 for  Visual Studio. All the example and demo code is written in new syntax and abreviations.
 

What Node.JS is Node.JS is a tool for Visual Studio that enables the Node.JS working experience with your Visual Studio.
How to install Node.JS The following guide provides a procedure for installing Node.JS tools for Visual Studio. Please note that in this article we are using Visual Studio 2013 Update 4.

  • Go to Node.JS Tools for Visual Studio
    [转]Getting Start With Node.JS Tools For Visual Studio Figure 1: node.JS tools for Visual Studio
  • Choose recommended downloads
    [转]Getting Start With Node.JS Tools For Visual Studio Figure 2: installation instructions for node.JS
  • Follow the instructions and it will install the great tools of Node.JS
    [转]Getting Start With Node.JS Tools For Visual Studio Figure 3: Getting installation completed for node.JS

Let's Start Creation of a Simple App
In this article we will use builtin templates to start building simple apps.
Pre-requites To implement and play with the source code, one should have:

  • Visual Studio 2013 express 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.
    [转]Getting Start With Node.JS Tools For Visual Studio Figure 4: New Project Templates

Discussing Node.JS templates
Let's discuss the available templates, these may increase or decrease depending on your custom installation or add-ons.
From Existing Node.JS code You can use this template if you have already created a Node.JS app and now want to taste the flavor of Visual Studio. No need to do any special things, just choose this template and select the path of your existing Node.JS app and you're all done (y).
Blanks Node.JS Console Application This template creates an empty application, just a skeleton for you. Let's provide a hands-on experience with this template to learn more about it.
[转]Getting Start With Node.JS Tools For Visual Studio Figure 5: Selecting a new project template
Have a look at the preceding image and note that:

  • Do not select "Create directory for solution".
  • Do not select Add to source control (unless you want to).

Click Ok to get the application routed.
The first file you will see has the following code:
[转]Getting Start With Node.JS Tools For Visual Studio
Just run the application (F5), you wil see your console window appears and disappears so quickly and you cannot see the expected output.
Let's re-write the code above (so we can hold our console window for a moment) as in the following:
[转]Getting Start With Node.JS Tools For Visual Studio
In the preceding snippet just add the time our function to hold our window for 3000 ms.
That is a great thing, now we can see the output as in the following:
[转]Getting Start With Node.JS Tools For Visual Studio Figure 6: Console App output
Folder Structure Let's have a look into the folder structure:
[转]Getting Start With Node.JS Tools For Visual Studiore Figure 7: Typical node.JS console app folder structure
Here you can see that our console app consists of:

  • 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 and so on.
    [转]Getting Start With Node.JS Tools For Visual Studio Figure 8: a typical package.json file
  • README.md: a normal readme file

Install/Update Node dependencies Just right-click on the project from the Solution Explorer and click on the Open Command Prompt.
[转]Getting Start With Node.JS Tools For Visual Studio Figure 9: Open the command prompt from Visual Studio
In the command prompt type "npm install".
[转]Getting Start With Node.JS Tools For Visual Studio Figure 10: Installing node.JS project dependencies
It will install all the dependencies required for the project.
Alternatively expand the "npm" node from the Solution Explorer and right-click the project and choose Update Install Package(s), it will update all the packages with the latest.
Also, you can do it by opening a npm install window above the option (Ctrl K,P):
[转]Getting Start With Node.JS Tools For Visual Studio Figure 11: Installing new npm package
Blanks Node.JS Web Application Now, let's try another node.JS template. Close the existing solution or just add a newer one and choose Blank Node.js Web Application template.
[转]Getting Start With Node.JS Tools For Visual Studio Figure 12: Getting started with Node.JS blank web template
The first file will open after the preceding action:
[转]Getting Start With Node.JS Tools For Visual Studio Figure 13: typical server.JS file
Run application (hit F5).
You will see two things happen:

  1. A command window invoked; this is saying that the node server is running on port 5858
    [转]Getting Start With Node.JS Tools For Visual Studio
  2. A web browser invoked with a output from the server.JS file (this is a default project file).
    [转]Getting Start With Node.JS Tools For Visual Studio

Folder structure
You can find a folder structure similar to the one in the node.JS Blank console app.
[转]Getting Start With Node.JS Tools For Visual Studio Figure 14: Typical folder structure of node.JS blank web app Visual Studio Intellisence Experience Let's try with writing something in the server.JS file, you will see that you get Visual Studio's typical intellisence.
[转]Getting Start With Node.JS Tools For Visual Studio
So, you can get the flavor of all Visual Studio things the same as if you were getting when working with other languages like C# / ASP.NET and so on.
Basic Node.JS Express 3 Application This template provides the ability to create a basic Node.JS app with Express 3 packages
[转]Getting Start With Node.JS Tools For Visual Studio Figure 15: Node.JS Express 3 application
During the preceding operation you can see the following dialog.
[转]Getting Start With Node.JS Tools For Visual Studio
So, your project has all the dependencies defined in the Package.json file.
If you clicked yes then you will definitely see the following message in the Visual Studio status bar.
[转]Getting Start With Node.JS Tools For Visual Studio
Which tells us about the installing package. The amazing thing is this process happens in the background. That 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 the project name from the Solution Explorer and just type "npm install" and hit Enter.
[转]Getting Start With Node.JS Tools For Visual Studio
Folder Structure Have a look into the following folder structure:
[转]Getting Start With Node.JS Tools For Visual Studio
In the preceding you can see various folders containing different files. You can see views, routes, public and so on. In this article we are not going to discuss everything in details, we will do this in a future Node.JS series of articles.
Running the application Run the application (hit F5) and you will see:

  • Command window
    [转]Getting Start With Node.JS Tools For Visual Studio
  • Web browser
    [转]Getting Start With Node.JS Tools For Visual Studio

Analyzing app.JS
Let's get the code lines that were added by the default template.
[转]Getting Start With Node.JS Tools For Visual Studio
The code above tells the Node.JS that these modules are required to run this app.
[转]Getting Start With Node.JS Tools For Visual Studio
It will initialize our express.JS function.
[转]Getting Start With Node.JS Tools For Visual Studio
This will only happen in a development environment.
[转]Getting Start With Node.JS Tools For Visual Studio
the first line tells the main/home page and second will provide is the response of our resource.
[转]Getting Start With Node.JS Tools For Visual Studio
Debugging App Put a breakpoint somewhere in your app.JS file.
[转]Getting Start With Node.JS Tools For Visual Studio
Run the app (hit F5), see when it hits the breakpoint.
The great thing is that you can see the breakpoints in the Visual Studio Breakpoints window as in the following:
[转]Getting Start With Node.JS Tools For Visual Studio
Here is the Call Stack window containing everything.
[转]Getting Start With Node.JS Tools For Visual Studio
You can find the local variables and functions in your Locals windows.
[转]Getting Start With Node.JS Tools For Visual Studio
Isn't it an imagine tool?
There are more templates that we will not discuss here, we will discuss and create a separate application using these templates in our future Node.JS  article series. Until then enjoy the flavor of this new Node.JS tools for Visual Studio.
Node.JS Interactive Window You can find this window similar to the Visual Studio Command Window:
Go to Tools -> Node.JS Tool -> Interactive Window. Alternatively press Ctrl+K,N.
[转]Getting Start With Node.JS Tools For Visual Studio Figure 16: Node.JS interactive window
In this window you can play with all the Node.js commands, this is one of the most powerful windows I have ever found. If you have some confusion then just type .help and you will get a list of commands:
[转]Getting Start With Node.JS Tools For Visual Studio
Let's play with a few of commands.

Figure 17: a list of available commands
Let's play with a few of commands.
Did you remember that we created a console app?
[转]Getting Start With Node.JS Tools For Visual Studio
Here we can get the similar output. Did you notice "undefined"? What was that?
[转]Getting Start With Node.JS Tools For Visual Studio Figure 18: Defining a function in Node.JS Interactive Window
In the preceding, we just defined a function "letsTryThis". This is a simple JavaScript function. You can think how to run it from within the same window, let's try and call that function as in the following:
[转]Getting Start With Node.JS Tools For Visual Studio Figure 19: Executing defined function
Wow, it works! One more great thing you can get is the History by pressing the up or down error keys. So, enjoy the power of the Node.js Interactive Window (y).
Diagnostic Info You can get all the info about your current node.JS app (please note that the info depends upon your current node.JS app). Go to Tools -> Node.js Tools ->Diagnostic Info.
[转]Getting Start With Node.JS Tools For Visual Studio Figure 20: Diagnostic report of a typical node.JS console app
[转]Getting Start With Node.JS Tools For Visual Studio Figure 21: a typical MVC app with node.JS
Discussing features of Node.JS tools for Visual Studio Let's discuss a few of the 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 breakpoint and DEBUG the application similar to other applications that run in Visual Studio.
TypeScript support
Node.JS tools for Visual Studio comes with the support of TypeScript, you can write your things using TypeScript.
In the preceding, we have almost tried to attempt all the features with valid examples. In future sessions we will create an entire application following great patterns.
Conclusion
Finally we will get the great thing Node.js tools for Visual Studio, it provides all the flavour of Visual Studio to develop Node.JS applications. This tool has many great features, it provides great Node.JS templates.

 
 
[转]Getting Start With Node.JS Tools For Visual Studio
Gaurav Kumar Arora

Gaurav is a Microsoft Technology Specialist professional. He has awarded lifetime membership from Computer Society of India (CSI). He is having more than 14yrs of experience in the industry.  Currently, he is workin... Read more

Personal Blog: http://gaurav-arora.com
上一篇:iOS- UITextField限制输入长度


下一篇:swift学习笔记之-扩展(Extensions)