Grunt, NPM and Bower in Visual Studio! It's awesome.. right?

The news that has come out of the Visual Studio team at VSConnect from the likes of Scott Guthrie (@scottgu), Scott Hanselman (@shanselman), Soma(@ssomasegar) and friends has been nothing short of blinding: Open-source .Net Framework Visual Studio 2015 and the new Community Edition? Asp.Net vNext? A strong focus on cross-platform mobile development? First-class support for Apache CordovaRoslyn? C# Intellisense in text editors like Atom and SublimeA whole host of other delights, improvements, products and features? Yes please! And it’s all been very, very well received by the .Net community of developers.

Being a web applications developer through-and-through, I’ve been very interested in what is coming out of the Asp.Net team regarding the new vNext and MVC frameworks, and VS Connect didn’t disappoint in that area either. We’ve known about the changes coming with MVC 6 and the shift towards a more composable application framework for a while, but today really hit home the deep – and flexible – integration with client tools like Grunt, Bower, Gulp and Node Package Manager.

And it’s awesome!

For the uninitiated, Grunt is a JavaScript task runner that allows you to define a build script of sorts, which can be configured to run whatever tasks you need it to, which include copying files, compiling LESS files, compiling TypeScript, linting JavaScript and cleaning directories. There’s a vast repository of tasks that can be installed through NPM, not to mention the ability to author your own with ease. I believe the release version will including support for Gulp, as it doesn’t seem to be included with the current VS 2015 November Preview, but I’m sure the tooling will offer a very similar experience.

Edit: As Mads Kristensen points out in the comments below, for 2015 Preview you must have Gulp installed globally through NPM in order for the respective tooling to light up. Use npm install -g gulp to install the task runner of your choice. He also says this won’t be needed in the release version!

Then there’s NPM (Node Package Manager) and Bower, which are like package managers for the client. Synonymous with Nuget, they provide node packages and client assets respectively, not to mention they work cross-platform. In the context of an Asp.Net website, NPM will provide you with your Grunt tasks, and Bower will provide you with your client-side runtime assets, such as jQuery, Bootstrap and AngularJS. One of the changes I expect to make in my own personal project development, is the shift away from using the built-in Bundling and Minification framework provided by Microsoft.AspNet.Web.Optmization, and instead using a system driven by Grunt and NPM.

All of this is music to my ears. As a .Net developer who has been delving into the world of Node JS web development as of late, I had seen the light when it comes to node packages, grunt build tasks and all the flexibility that comes with it. Especially seeing as Azure can already host all of this stuff for you. Topping it all off with Git deployment, it’s a fantastic time to be a web developer, never mind an Asp.Net web developer.

But what does all this look like to a thoroughbred .Net developer, who hasn’t used all these tools before, or possibly never used MVC before? How will the changes coming with MVC 6 look to them? I fear that it’s going to just look.. strange.

Let’s look at what a brand new MVC site looks like. Here I’ve created a new blank MVC project and added some stuff to it, and I’ve gotten something we can run straight away. This the layout of the project:

MVC 6 Project

A few things to note:

  • There’s a wwwroot directory – this is where your static assets go, such as your images, JavaScript and CSS
  • There’s a dependencies*folder* with a weird icon, containing NPM and Bower packages
  • There’s loads of .json files in the root. They configure things
  • There’s a Gruntfile – these are your client build tasks
  • There’s a Startup.cs file that contains our bootstrap and setup code
  • It’s got our normal MVC stuff, like controllers and views
  • There’s no web.config

This is quite the departure from what a normal Asp.Net site looks like. On top of that, with it’s lack of a build step thanks to Roslyn, it also feels different, like it’s a shout back to the old days of Web Site projects, where you didn’t have to manually include things into the project file and you can just edit C# code without building manually. Roslyn takes care of the building process now, and we’re promised it will be faster by the time Visual Studio ships.

In terms of the future of MVC and web development with Asp.Net vNext, my gut feeling is that it’s going to take a little while for people to buy into this. There’s a lot of new here for someone coming just from MVC 5, and it’s a total rewrite for those coming straight from Web Forms to embrace the new stack – but at least they’d be on the path to the future. The fear is that they might feel that they have to step into the command line to complete whatever task they need in terms of building or downloading dependencies and assets for their website. Just looking at the root of this project, there are three .json files that I now have to manage (I still get confused as to which to open between project.json and package.json when I want to configure my site), and even more once I start getting into the new app configuration model.

Fortunately, VS does a very good job at keeping you from dipping into the command line. The tooling to manage your packages and running Grunt tasks is exceptional:

  • You can install bower and NPM packages by right-clicking and selecting “Restore”
  • You can author your Gruntfiles inside VS just like any other file
  • You can run Grunt tasks from the new Task Runner Explorer (see below), right down to the individual task
  • Furthermore, you can assign tasks to various build steps – PreBuild, PostBuild, Clean and Project Open

Here’s what my sample Gruntfile with the Task Runner Explorer open looks like:

Task Runner Explorer

Notice that it’s picked up the individual tasks and listed them in a tree. I can go and right-click on each of those and run them individually if I like. From the same menu, I can also assign them to one of the four steps in the build process! Furthermore, all this is doing is running the exact same commands that I would do myself from the command line – there’s no real magic here, just convenience.

One final gripe that I’ve forwarded to the VS team through the feedback tool is that this experience doesn’t seem to be enabled when working with Apache Cordova apps, which would be insanely handy. Given that they too are Html/JS/CSS apps (we really need an acronym to cover that) it feels like I could be using some kind of Grunt/Bower power there too – and there’s nothing to stop you doing it from the command line – and it would be nice if VS enabled that scenario.

Personally I’m really looking forward to being able to work with all this stuff out in the wild; there’s already a vast ecosystem with Grunt/Gulp, Bower and NPM and rather than shun it, Visual Studio has embraced it for the benefit of all involved, not just .Net web developers.