Terminal/Console Choices on Windows

As the steam picks up on Windows 10 becoming the operating system developers can return to building on, there’s a hump that needs to be overcome. What console should we use?

console2

Hanselman blogged about console2 back in 2011 with a bit of sadness that the native Windows command prompt hasn’t seen much love in a long time. While console2 still remains a lightweight alternative, the Windows 10 command prompt promises to take charge.

cmder

cmder is what I use on my machines. Installation is quick, it looks and feels sleek and comes with msysgit if you pick full installation. It’s built on top of conemu so it’s very configurable. And it uses enhancements from clink using cmder makes it hard to miss Mac OS’s Terminal.

conemu

As a very active project, conemu takes the cake if you want a no-nonsense, highly configurable, Quake-style-able console emulator. Hanselman also blogged about its many features. If cmder didn’t look so sleek, I’d still be using conemu.

babun

One of the newest kids on the block is babun. It takes some time to install but boy it’s packed with tools. It comes with pact, a package manager for Cygwin packages (finally) & a preconfigured Cygwin (without interfering with any existing installations). It’s possible to host a babun shell in conemu and cmder so that’s really handy. And probably the best thing to do right now since babun is still in its early stages.

That’s my list, enjoy building on Windows!

Building with Node.js Tools Visual Studio

Node.js Tools for Visual Studio (NTVS) brings the goodness of Visual Studio to developers building with Node.js. 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 that, now 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 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 for example.

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

  • 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.

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

  • 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!

This post is cross posted on Go DevMENTAL.

LESS in the .Net World

LESS brought a very different and powerful dynamic to CSS. By introducing few simple features, it has changed the way CSS should be written (generated). The .Net web stack has adopted to utilize LESS and here are some of the tools that bring it to .Net.

SimpLESS

A very simple and headache free solution is SimpLESS. It tracks the LESS files you add and automatically compiles them to CSS and minifies them, based on your preferences.

This solution is independent of the .Net technologies and can work for any valid LESS file. Just add the files you want to track and compile to SimpLESS and it will compile, minify and add some love.

Web Essentials 2012

This Visual Studio 2012 extension is amazing for web developers working in the .Net stack. It brings extensive support for Javascript, HTML, CSS, MarkDown, LESS, CoffeeScript, ZenCoding and TypeScript.

It comes with a preview window and compiles on save. Just like you’d want it to.

Even if you’re not using it to compile LESS, this extension is a must for web developers building with .Net since it brings so many goodies to Visual Studio.

.less{}

Dotless is a .NET port of the Javascript library. There are certain differences still but the library is close to reaching complete compatiblity. Just like most libraries, this too has a handy Nuget package that you can add to your ASP.Net project.

Once added, a reference to dotless.Core will be added to your web project. In the HttpHandlers section of Web.Config a Dotless processor will be added. So that whenever a LESS file is encountered, the processor will take over.

<add type="dotless.Core.LessCssHttpHandler,dotless.Core" validate="false" path="*.LESS" verb="*" />

Futher configuration can be also be added by adding a config handler in the configSections node of Web.Config.

<section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler,dotless.Core" />

Then by declaring that section configuration for minification and caching (for example) can be specified. Full documentation is available at the dotless wiki.

<dotless minifyCss="false" cache="true" />

Dotless also is able to work in a client environment and does not contain any server-side handling. This is also available as a Nuget package.