Integrating Visual Studio Code with dnx-watch to develop ASP.NET 5 applications

Visual Studio Code is a great cross platform code editor that is also free. You can get it at code.visualstudio.com for Mac, Windows, or Linux. It's great for web development, and particularly shines with node.js. Since ASP.NET 5 is still in active beta and moving very fast, some of the features I want when VSCode is used with ASP.NET aren't there yet. Fortunately VSCode is very configurable and I was able to get it to do what I wanted in about 10 minutes of messing around.

One of the promises of ASP.NET is the ability to write code, hit Ctrl-S (Save) in your editor and then hit F5 (refresh) in your browser to see the results. Rinse, repeat. Any "build" step should be basically hidden.

After you've got .NET Core and ASP.NET 5 with the DNX (for now, the "dotnet execution engine") you should take a look at the dnx-watcher command. It's a command you can install in one line:

dnu commands install Microsoft.Dnx.Watcher

This convenience command wraps dnx, so when you want to run your app rather than "dnx web" you'll say "dnx-watch web." It will watch your source files directory for changes. When you make a change, be it in VSCode or in Notepad, dnx-watch will kick the process and start it again so you can hit F5 in your browser.

Visual Studio Code doesn't have a Build or Debug menu for ASP.NET today, but I wanted to be able to "Ctrl-Shift-B" and build/start my web application. Specifically I wanted to run dnx-web on the current app.

Here's how you do that today. First, install dnx-watch as above.

Next, make a folder at the top of your project called ".vscode" and put a file called "tasks.json" inside it. This is a special file that lets you tell Visual Studio Code what gulp tasks it should know about.

Here I'm saying there's a task (that we'll create in a second) called "watch" (I decide on the name) and it's the Build command for this project. I could make a Test command if I wanted, as well. I want to see the output.

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "tasks": [
        {
            "taskName": "watch",
            "isBuildCommand": true,
            "showOutput": "always",
            "isWatching": true
        }
    ]
}

Now where does this "watch" task go? Well it goes in my project's gulpfile.js! It's a gulp task like any other.

I want to shell out and run dnx-watch, so I'll have to bring in a small library called gulp-shell by adding it to my package.json, then running npm.install. That will give me the ability to shell out to arbitrary command line apps like dnx-watch. Visual Studio Code will capture and stream the output as seen in the screenshot above.

Then I just add one line to my gulpfile:

gulp.task('watch', shell.task(['dnx-watch web']))

ASIDE: There is the beginnings of a gulp plugin for ASP.NET called "gulp-dnx" that knows about DNX and ASP.NET 5 but since I just wanted this one feature, this was easier. When gulp-dnx knows about dnx-watch, it might be easier, but the general flow would remain the same.

At this point, I can code all I want, press Save and dnx-watch will automatically restart my application. I can put Visual Studio Code side by side with my browser and Save/Refresh over and over.

Now you can always add your own keybindings by editing keybindings.js from File | Preferences | Keyboard Shortcuts. For example, here Ctrl-Q is bound to Terminate Task (that will let me stop dnx-watch). However, because we said "isBuildCommand: true" in the tasks.js file, we've told Visual Studio Code that our "watch" gulp command IS our project's command to build. You could add test commands, make your gulp file more sophisticated; the sky's the limit.

Give it a try!

Sponsor: Many thanks to Atalasoft for sponsoring the feed this week. If your project requires image viewing, format freedom, scanning, or other document-centric workflows, Atalasoft’s document imaging experts can help. Evaluate their developer tools for 30 days with remarkable human support.