Building with Node.js Tools for Visual Studio

Článek
05/21/2014

Node.js Tools for Visual Studio (NTVS) brings the goodness of Visual Studio to developers building with Node.js.

Software developer Kowsheek Mahmood helps you understand how to use Visual Studio for node.js development. Take it away Kowsheek!

The official description of NTVS is:

“NTVS is a free, open source plugin that turns Visual Studio into a Node.js IDE. NTVS supports Editing, Intellisense, Profiling, npm, TypeScript, Debugging locally and remotely (Windows/MacOS/Linux), as well Azure Web Sites and Cloud Service.” - https://nodejstools.codeplex.com/

What that means is it's possible to use one of the best (if not the best) IDEs, with all its awesome cutting-edge features and extensions, to build Node.js applications.

The Tools

First, we're going to need Visual Studio 2013. Since NTVS beta 1.0 Visual Studio 13 Express Web is supported and can be downloaded for free. If you are a student, you can download a free copy of Visual Studio Professional 2013 from Microsoft DreamSpark.

Next, we're going to need the node.js tools themselves. Download the tools from its site on CodePlex. The installation process is simple enough, and detailed installation instructions are available in the NVTS Wiki.

New Project

Having installed the tools, we can start by creating a new project.

When creating a new project, there are several templates available. You can choose create a project with existing Node.js code. There are Express application templates available as well. And I'll be using an Express application template that's Windows Azure ready (streamlining the deployment).

When I hit OK, I'll am asked to download packages that are defined in this template. We'll be seeing what these packages are shortly.

While the project is being created, packages from the npm registry are downloaded and some sample code is generated.

At this point solution is ready with Express, Jade & Stylus, bringing us to a very familiar Node.js set up. And if I run it, we'll see yet another familiar screen but now, powered through Visual Studio, its visual debugging tools and much more.

npm

With NTVS, npm is fully integrated into Visual Studio. Right click on the npm node on the Solution Explorer and select Manage npm Packages to bring up the package manager UI.

Building

Just to play around with it, let's rename the user.js file to coffee.js. We'll also create an array of drinks and their ratings and rework the list method to return that array.

 var coffees = [{ name: "Latte", rating: 1 }, { name: "Mocha", rating: 5 }, { name: "Mochachino", rating: 2 }];

exports.list = function(req, res) {
res.send(coffees);
};

If I run my application as is, we'll notice the first glimpse of what NTVS is all about. I am told that there was an error with finding a defined module since I haven't updated the app.js file to correctly point at the new module I've created.

Let's fix this by first changing the module name and file name on line 8 of app.js.

 var coffee = require('./routes/coffee');

And changing the call to users on line 33.

 app.get('/coffees', coffee.list);

Running the application and navigating to /coffees this time will show us what we expect, a list of drinks and their respective ratings.

Debugging

Regardless of the browser you are testing your application in, you can visually debug your application in Visual Studio. It's as simple as navigating to the line you want to break at and setting a breakpoint. When your application hits this point the debugger will kick in.

How awesome is that?

Publish to Windows Azure

Now that I have somewhat of an application done, let's publish it. Choose Publish from the Build menu.

Choosing Windows Azure Web Sites will guide you through a log in (or sign up) process for your Windows Azure account. Next, you can either choose to deploy to an existing site or create a new one.

At this point, it's possible to configure several things such as availability and database for the application. And once I hit Create, a site will be provisioned for me under expressoapp.azurewebsites.net.

This is a Node.js application, built in Visual Studio, deployed to the clouds of Windows Azure in a matter of few clicks.

Closing Points

1. Since the first build of NTVS there have been many improvements made, there are performance enhancements on the way for the current version as well. More details are available on the release notes.

2. In the latest beta release, it is also possible to remotely debug Windows Azure Web Sites. Try it out!

3. There are already many resources available to help you get started with NTVS. Check out this post by Scott Hanselman and videos on the NTVS Videos channel.

With NTVS the entire development lifecycle of any Node.js application can now leverage one of the best developer experiences available today in Visual Studio. Happy building!

Kowsheek is a software developer focused on application design and architecture specializing in cross-platform and open-source technologies.

Find out more about his work & blog at https://kowsheek.com/. This post is also available on Kowsheek's Blog .

Comments

Anonymous
May 24, 2014
fantastic review kowsheek! thanks!

Sdílet prostřednictvím