Scott Hanselman

Introducing node.js Tools for Visual Studio

November 21, '13 Comments [93] Posted in nodejs | Open Source | VS2013
Sponsored By
node.js and Express running in VS

Just when you thought it couldn't be crazier in Redmond, today they are introducing node.js Tools for Visual Studio!

NTVS runs inside VS2012 or VS2013. Some node.js enthusiasts had forked PTVS and begun some spikes of node tools for VS. At the same time the PTVS team was also working on node.js integration, so they all joined forces and made NTVS a community project. NTVS was developed by the same team that brought you PTVS with help from friends like Bart Read from Red Gate (he did the npm GUI), and Dmitry Tretyakov from Clickberry for several debugger fixes & features.

NTVS is open source from the start, and has taken contributions from the very start. It supports Editing, Intellisense, Profiling, npm, Debugging both locally and remotely (while running the server on Windows/MacOS/Linux), as well publishing to Azure Web Sites and Cloud Service.

It's actually pretty freaking amazing how they did it, so I encourage you to download it and give it a try because some of the stuff (even given this is an alpha) is very very clever.

Blank Express Application

Node.js Tools for Visual Studio takes advantage of V8 Profiling API's as well Visual Studio's Reporting features to give you a sense of where your program is spending its time.

NOTE: See that File | New Project dialog up there? Visual Studio organizes things by language, so node.js is under JavaScript. But you've also got Python and Django, iOS and Android via C#, TypeScript, VB, F#, all in Visual Studio.

One of the things that's impressed me about the way they integrated node.js into Visual Studio was that they didn't try to recreate or re-do things that already worked well. It's node, it runs node.exe, it uses the V8 debugger, it uses the V8 profiler because that's what people use. Duh. But, for example, NTVS can take the output from the V8 profiler and display it using the Visual Studio Profiler Reporting Tools. No need to reinvent the wheel, just use the right tool for the job.

Hacking on the Ghost blogging engine with node.js for Visual Studio

Let's look at an example.

From within Visual Studio, go File New Project, click JavaScript, then "From Existing Node.js code."

From Existing node.js Code

Point NTVS to your Ghost folder.

Create from Existing Code

Then tell node.js for VS that the startup file is index.js, hit Next, save the project file and Finish.

Create New Project from Existing Code

At this point, you've got Ghost inside VS.

Random: that since I have Web Essentials I also get a nice split-screen markdown editor as well.

From here, just hit F5 to Debug, or Ctrl-F5 to start without Debugging. Also notice the properties of the Project in the lower right corner there showing the node path and port as well as the Startup File. You can change these, of course.

Ghost inside Visual Studio with NTVS

Here's me running Ghost locally. You can see the path to node, the ghost.js file and my browser.

Running Ghost in VS with node for VS

You'll get good intellisense for completions and help for method signatures.

Intellisense example

Debugging

Node.js Tools for Visual Studio includes complete support for debugging node apps. This includes support for Stepping, Breakpoints, "Break on exception", as well as Locals, Watch, Immediate and Call Stack tool windows.

You can manage Exceptions just like any other language service. See in the dialog below node.js exceptions are listed along with other exceptions in managed and unmanaged code.

Managing Exceptions in node.js for Visual Studio

The debugging still happens like it always has, with the node V8 debugger, except Visual Studio connects to the debugger over another socket (remember, you can even debug node.js remotely running on a Linux or Mac like this!) and translates how V8 thinks into how Visual Studio thinks about debugging. The experience is seamless.

See in this screenshot, you can see node.exe is being debugged, I'm running Ghost. You can see my Call Stack, and the Locals in the Watch Window. I can inspect variables, step around and do everything you'd want to do when debugging a Web App.

Debugging Session of Ghost in VS with Node Tools for Visual Studio

npmVisual Studio

The npm experience is pretty cool as well. Node.js for Visual Studio is always watching the file system so are more than welcome to run npm from the command line or from within the node immediate window and Visual Studio will see the changes.

You can also use the npm Package Management dialog and search the repository and install packages graphically. It's up to you.

npm package management within VS

Here's a package installing...

Installing a module

The physical node_modules and how modules are handled is pure node...VS doesn't touch it or care. However, the Solution Explorer in Visual Studio also presents a logical view on top of the physical view.

image

NOTE: I really like this. I think it has potential and I'd even like to see references in .NET treated like this. The physical and the logical, along with a dependency tree showing NuGet packages. It helped me understand the project much better.

There's lots more. There's an REPL interactive window, and you can just publish like any other web project using the same Publish Wizard that ASP.NET projects use. You can publish node.js apps directly to Azure as well, either with Git or with Visual Studio publishing.

You can also remotely debug node instances running on other machines by starting node with the included Remote Debugging Proxy.

image

node.exe RemoteDebug.js -machineport 5860 script.js

As mentioned, you can do remote debugging between Visual Studio and node running on any server OS.

Conclusion

I'm personally pretty happy with the way that Visual Studio is turning (in a short amount of time, seems to me) into quite the competent language and environment factory.

Node.js Tools for Visual Studio is entirely open source under the Apache license and they welcome contributions and bug reports. It's Alpha and it's early but it's awesome. Go get it. Big congrats to all involved!


Sponsor: Thanks to Red Gate for sponsoring the feed this week! Easy release management: Deploy your .NET apps, services and SQL Server databases in a single, repeatable process with Red Gate’s Deployment Manager. There’s a free Starter edition, so get started now!

Disclosure: FYI, Red Gate does advertise on this blog, but it was a total coincidence that a Red Gate employee helped with node.js Tools for VS. I just found that out today. They are very nice people.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. I am a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

SCREENCASTS: What's New in Visual Studio 2013 - learn over lunch!

October 21, '13 Comments [65] Posted in ASP.NET | Screencasts | VS2013
Sponsored By

I could write a whole epic post about what's new in VS2013 for Web folks and front-end developers, but this time instead I did some videos. I'm proud of them and I think they really show some of the cool new features in a very clear way.

These are short, clear and to the point. I did them on my own and there's no marketing-speak, just "here's what we built." Here's the full release notes for ASP.NET and Web Tools for you to check out if you really like reading.

Otherwise, take about 30 minutes total, perhaps over lunch, and watch these short videos with live demos of what's new in Visual Studio for Web Developers and Front End Devs.

HTML5 in VS2013

CSS in VS2013

BrowserLink in VS2013

Page Inspector in VS2013

JavaScript in VS2013

Publishing in VS2013

If you've been paying attention over the last year, you may have seen some of these features. I realize that these may not ALL feel like "amazing new surprises." That's the price for being open, eh? If you'd prefer we hide out for a year and make stuff then appear and DROP it on you, let me now. Otherwise, we're sticking with a more Open Web.

Hope you enjoy the tools and the direction.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. I am a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Visual Studio 2013 RC for Web Developers - One ASP.NET, Browser Link, and our Direction

September 9, '13 Comments [80] Posted in ASP.NET | VS2013
Sponsored By
Browser Link connects the IDE and Browser

ASP.NET and Web Tools for VS2013RC is out today. You can feel free to install it over the top of VS2013 Preview if you like. That's what I did.

Be sure to check out http://www.asp.net/vnext for release notes and docs, as well as updated tutorials. There will be a lot more docs and videos coming, as well as details on how to extend and use everything. Since this is the Release Candidate (rather than the final release) there's still some work to be done.

One of my favorite features, and a feature that I think is the most representative of the direction we are going, is Browser Link and best of all, its extensibility model.

For example, you remember how you can select Browse With, and set multiple browsers as your default browser? (Some folks haven't noticed that feature yet) Here I've made a regular side and selected IE and Chrome as my defaults with the Browse With dialog (hold Ctrl for multi-select within Browse With).

image

Now, Ctrl-F5 to launch both browsers:

image

Notice that Bootstrap is the default template now. We'll have Bootstrap 3.0 for the final release.

I'll change some text in the Index.cshtml. Hover over the Browser Link button in the toolbar:

image

It knows two browsers are talking to VS using SignalR and JavaScript. No magic, just web standards.

Now, you can type code and html and press Ctrl+Alt+Enter to refresh all connected browsers, or you can click Browser Link Dashboard:

image

Here's the dashboard. I've clicked on IE:

image

Even more interesting, is that Browser Link is itself extensible.

That menu in the Browser Link Dashboard where we're talking to a specific browser? You can add things to that. Mads Kristensen has done just that with Web Essentials and added extensions to Browser Link (Make sure to get the VS Web Essentials 2013 RC build, or you can build it from source!)

Here's what the Browser Link Dashboard looks like with a Browser Link Extension installed. See the added menu items?

image

Aside: Note also the Error List, we can add a new class of error in VS and even fix them with a double-click.

image

If I click Design Mode, check out what happens. The "Design Surface" potentially moves to the browser itself, using JavaScript, but with bi-directional communication between VS and the browser.

Remember that Web Essentials is open source, so I can get an idea of what's going on by reading the source. Without getting too deep, I can look at Inspect Mode and see it's using MEF.

[Export(typeof(BrowserLinkExtensionFactory))]
[BrowserLinkFactoryName("InspectMode")] // Not needed in final version of VS2013
public class InspectModeFactory : BrowserLinkExtensionFactory
{
...
}

And that is a list of actions:

public IEnumerable<BrowserLinkAction> Actions
{
get
{
yield return new BrowserLinkAction("Inspect Mode", InitiateInspectMode);
}
}

And that it's using SignalR to talk to injected JavaScript:

private void InitiateInspectMode()
{
Clients.Call(_connection, "setInspectMode", true);
_instance = this;
}

And I can see in the browser's JavaScript that as I hover over elements in the browser, I can select the source in VS and even bring VS to the front:

inspectOverlay.mousemove(function (args) {
inspectOverlay.css("height", "0");

var target = document.elementFromPoint(args.clientX, args.clientY);

inspectOverlay.css("height", "auto");

if (target) {
while (target && !browserLink.sourceMapping.canMapToSource(target)) {
target = target.parentElement;
}

if (target) {
if (current && current !== target) {
$(current).removeClass("__browserLink_selected");
}

current = target;
$(target).addClass("__browserLink_selected");
browserLink.sourceMapping.selectCompleteRange(target);
}
}
});

inspectOverlay.click(function () {
turnOffInspectMode();

browserLink.call("BringVisualStudioToFront");
});

This is just a taste of what's coming. One ASP.NET is a journey, not a destination. We'll have more refinements, more scaffolding, and continued improvements as we head in this directions and in future updates (Update 1, etc).

Browser Link is just one feature, be sure to check out (and subscribe to) the Web Dev Blog where ASP.NET and Web Tools lives on MSDN. Today's post talks about:

  • One ASP.NET
  • Authentication
  • The new HTML5 editor
  • Azure Web Site tooling
  • Scaffolding
  • MVC5, Web Forms, SignalR 2, Web API 2
  • Entity Framework 6
  • OWIN Support and Self-Hosting
  • ASP.NET Identity
  • NuGet 2.7

Remember, even though it feels like a lot, these are almost all additive changes that you can take or leave. You can still make and develop ASP.NET 2 apps in VS 2013. You can use your own View Engine, your own ORM, your own Identity, you own Scaffolding, your own components. You decide.

image

We'll have docs and updates soon for scaffolding, modifying and customizing File New Project to add your own, as well as a list of what's new and released as NuGet packages. Watch http://www.asp.net/vnext and the Release Notes for lots of details and any breaking changes.


Sponsor: Big thanks to Infragistics for sponsoring the feed this week! Download Your Free HTML5/jQuery Grid:  Prepare to launch eye-popping, performance-driven HTML5 applications with Ignite UI. Believe your eyes - you can download the world's fastest, most reliable jQuery Grid now - no strings attached

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. I am a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Page 1 of 1 in the VS2013 category

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.