Monday, May 2, 2016

How to create Node.js development environment in Visual Studio?

Now Visual studio is enriched with the tools that turn Visual Studio into a powerful Node.js development environment. Node.js Tools for Visual Studio is free and open source plug-in built on top of Visual Studio 2012, 2013, or 2015. This tool has enable following feature for Node.js development:

  • Intelligent code completion
  • Advanced debugging and profiling
  • Integration with other Visual Studio features and 3rd party tools
  • Node.js, io.js, JavaScript, Typescript, HTML, CSS, and JSON support

Installation:
To create Node.js development environment in Visual Studio follow the below steps:

  1. Install Visual Studio
    Node.js Tools for Visual Studio supports Visual Studio 2012 Update 4, Visual Studio 2013 Update 4 and higher. It also support community version of Visual Studio. Visual Studio Community is a free, fully featured, and extensible IDE for individual developers, open source projects, academic research, education, and small professional teams. Create applications for Windows, Android, and iOS as well as web applications and cloud services. Build apps for any platform. Use designers, editors, debuggers, and profilers in a single tool. Access thousands of extensions and more. Go to Visual Studio download page and download which flavor of Visual Studio application you want to use.
  2. Install Node.js Tools for Visual Studio
    Node.js Tools for Visual Studio installs via msi installer and takes few minutes. Just download the appropriate version of the tools according to the Visual studio that you have installed. The latest release of tools is Node.js Tools 1.1.1 and if you have installed Visual Studio 2012 or 2013 then download tools that relevant to your Visual Studio installation.
    clip_image002_thumb[2]
    After downloading the tools follow the installation wizard to complete the installation. Currently I am using Visual Studio 2013 so I am using tools compatible with Visual Studio 2013.

    clip_image003_thumb[1]
    Click next and then accept License agreement to complete the installation.
  3. Install Node.js and Get Started with Node Tools for VS
    in last step, we need to install Node.js interpreter and Azure tools (for deployment). Actually Node.js Tools for Visual Studio requires a Node.js interpreter to be installed to work with Node.js. Node.js is built for 32-bit and 64-bit architectures.
    Node.js (x86): https://nodejs.org/dist/v0.12.7/node-v0.12.7-x86.msi
    Node.js (x64): https://nodejs.org/dist/v0.12.7/x64/node-v0.12.7-x64.msi
    Azure Tools:
    Azure Tools for VS 2015: http://go.microsoft.com/fwlink/?LinkId=534216
    Azure Tools for VS 2013: http://go.microsoft.com/fwlink/p/?linkid=323510
    Azure Tools for VS 2012: http://go.microsoft.com/fwlink/p/?linkid=323511

Now we are ready to start working with Node.js in Visual Studio and going to see the installed temples for the Node.js projects.
To create a project, Select New Project from File menu. You will find Node.js templates in Installed Templates under JavaScript section. Click on Node.js and you will find several template to create Node.js projects.

clip_image005_thumb[2]

Select “Blank Node.js Web Application”. Enter a project name “NodejsWebAppTest” and location and click OK.

Once Visual Studio completes the process to create the project then it opens “server.js” file in the editor. It is just like a program which prints “Hello world” on the console.

var http = require('http');
var port = process.env.port || 1337;
http.createServer(function (req, res) {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World\n');
}).listen(port);

Now press F5 to run the application in browser. In my case what happened, I missed the step 3 – Installing Node.js. Due to this reason an Information dialog appear on my screen telling that you have not installed Node.js.
clip_image006_thumb[1]

Then I have to download Node.js and install it before running this application again. Here are the steps to install Node.js:

  1. Run the downloaded application and it will popup below welcome screen. Click Next.
    clip_image007_thumb[1]
  2. Accept License agreement to complete this step and then click Next.
    clip_image009_thumb[1]
  3. After this step it will ask you to specify the destination folder where it should be installed.
    clip_image011_thumb[1]
    This is global installation of Node.js which is referenced in the projects. We can specify the path to a local interpreter in each of your Node.js projects.
  4. After that click next and at last step, click install to start installation process.
    clip_image013_thumb[1]

When this process complete then again try to run the application. Just press F5 and you will see the results in the browser.

clip_image015_thumb[1]

Conclusion:
Now we have a Node.js development environment up and running in Visual Studio. There are lots features included in the IDE for development of Node.js as we are debugging a C# code. E.g. Debugging, IntelliSense, Profiling and Interactive windows also.

No comments :

Post a Comment