Building ASP.NET vNext Apps without Visual Studio

This year is shaping up to be an earth shattering one for Microsoft folks and Web Developers, which means it’s an especially interesting year if you are a Web Developer using Microsoft tools, like me. Firstly, Windows 10 was announced for this summer. I’m already using the Technical Preview. Windows 10 comes with WMF5 and that gives you a new version of PowerShell to work with. Microsoft is also open sourcing the .NET framework and ASP.NET and the next revision is coming likely this year. ECMAScript 6 hits the shelves this year. Finally, Web Components seems to be coming out of the shadows (pun intended) and looks like it will go main stream with supporting projects like Polymer and Aurelia. Wrap all that around a new version of Visual Studio and I can’t wait.

Not everyone likes Visual Studio, though. It definitely forces you into a method of working. Maybe you like picking your tools and Visual Studio forces you into using Grunt or Gulp, or maybe you like following the various instructions you find on the web and Visual Studio does things behind the scenes that prevents you from doing that. Whatever the reason, you don’t have to use Visual Studio. It just takes a little setting up.

Let’s start with writing ASP.NET vNext applications without Visual Studio. Doing this in Visual Studio is easy – you click-install Visual Studio, start it up and then say New -> Project… Nothing could be simpler. Let’s take a look at what that means without Visual Studio in the picture.

Install Git

Firstly, I have to install Git. I get my Git implementation from Chocolatey. So before I can install Git I have to add Chocolatey. Open up a PowerShell prompt with Administrative privileges (Right click and select Run As Administrator). The install of Chocolatey is fairly simple:

# For servers without WMF5
iex ((new-object net.webclient).DownloadString('https://chocolatey.ord/install.ps1'))
choco install binroot -y

# For servers with WMF5
Get-PackageProvider chocolatey -ForceBootstrap -ErrorAction SilentlyContinue

Now that I have Chocolatey I can install Git easily:

# For servers without WMF5
choco install git.install
choco install posh-git

# For servers with WMF5
Install-Package -Verbose -Force git.install
Install-Package -Verbose -Force posh-git

That’s it for administrator type things so exit out of that PowerShell prompt and start a new one that isn’t running as Administrator.

In order to use what I have just installed, I’ve included the following in my PowerShell profile:

Import-Module PathUtils

Add-Path -Directory "${env:ProgramFiles(x86)}\Git\bin"

Import-Module posh-git

function global:prompt {
    $Host.UI.RawUI.ForegroundColor = $GitPromptSettings.DefaultForegroundColor
    Write-Host($pwd.ProviderPath) -nonewline
    return "> "

Start-SshAgent -Quiet

The first thing I do is alter my path to add git so I can easily run it from the command line. I’ve got a module called PathUtils that includes the Add-Path. The other thing I do is include the code necessary to alter my prompt according to what Git is telling me. This allows me to verify whether I need to check anything in – it’s strictly optional but extremely useful when I am using Git as a source code control mechanism. You can find these files in my Github repository.

Once I have those in place, I closed down my Administrative PowerShell prompt and opened a new non-Administrative PowerShell prompt. Just in case you were wondering, I pretend cmd doesn’t exist these days – everything is PowerShell.

Install the KPM

The next step is to get some files necessary for running ASP.NET from the repository. I like to clone repositories into ~\Source\Github – Visual Studio clones repositories into ~\Source\Repos so it makes sense to put the Github repositories somewhere else. This is a one-time deal, just like installing Git.

cd ~
mkdir Source
mkdir Source\Github
mkdir Source\Github\aspnet
cd Source\Github\aspnet
git clone

That last line does the actual cloning. I now have a directory Home. Change the directory into Home. Note the prompt now contains [master] – that’s posh-git telling you the state of the git repository. The cyan indicates that my repository has no pending pushes. Run kvminstall.ps1:

cd Home; .\kvminstall.ps1

Once that is all over I have a ~\.k\bin directory containing a kvm command and that directory has been added to my path. However, the path is not read automatically. I need to close down my PowerShell prompt and re-open it. Run kvm list and I can see the image below:


I should arrange to run kvm upgrade to upgrade your install when new versions come out. If you have multiple versions installed then you can use kvm use to switch between them. This is useful when your main production code is on one version but you are trying out the code on a new version.

Get an Editor

Ok – technically, you COULD write all this in Notepad. Seriously, are you insane? There are a lot of good editors on Windows so you will be spoiled for choice. Here are options on the free end of the scale:

None of these has intellisense. You have been warned. That means that everything needs to be researched and added by hand. I prefer Sublime Text as an editor, but could easily go Notepad++ as Sublime Text costs money.

If you like the integrated stuff, you can’t go wrong with WebStorm. However there is no C# support. It’s great if you are the front end developer and integrating with someone elses ASP.NET code. Webstorm is $49 for a personal license, but open source projects, Microsoft MVPs, students and teachers all get it for free.

Writing a Simple ASP.NET Application

In the Visual Studio environment, I can scaffold my application using New -> Project… There is no scaffolding now – just a KPM environment. So I need to do that myself.

The first thing I need to do is write my project.json file. I’ve switched to my blog-code repository which is in ~\Source\Github\blog-code and created a new directory called BaseAspNetApplication – my intent is that it is a little bit bigger than the Empty ASP.NET application, but smaller than the Starter project. Inside I’ve created a new project.json with the following content:

	"webroot": "wwwroot",
	"version": "0.0.1-alpha",
	"authors": [ "Adrian Hall" ],
	"dependencies": {
		"Microsoft.AspNet.Hosting": "1.0.0-beta3",
		"Microsoft.AspNet.Server.WebListener": "1.0.0-beta3",
		"Microsoft.AspNet.StaticFiles": "1.0.0-beta3",
		"Microsoft.AspNet.Diagnostics": "1.0.0-beta3"
	"frameworks": {
		"aspnet50": { }
	"commands": {
		"web": "Microsoft.AspNet.Hosting server=Microsoft.AspNet.Server.WebListener server.urls=http://localhost:5000"

The commands section may be new to you. Here I can specify additional commands to the K runtime. Much like you would with java – run java somepackage. Here I am running a new web server instead of the IIS Express that I am used to running. I get to specify the URL and the port it is running on so I don’t conflict with anything else.

Did you notice something when you were typing that in? No intellisense. That means I had to go to Nuget and find the packages I wanted, then copy the version in. Intellisense was pretty much the thing I missed when I was doing this without Visual Studio.

Before you go further, make sure you run a package restore. It’s done for you in Visual Studio, but not here. To do a package restore, use the following:

kpm restore

Next up is my Startup.cs which I’ve shown you a few times already:

using Microsoft.AspNet.Builder;
using Microsoft.Framework.DependencyInjection;
using Microsoft.AspNet.Diagnostics;

namespace BaseAspNetApplication
	public class Startup
		public void Configure(IApplicationBuilder app)

Before I can produce anything, I need a HTML page to display. Place the following in wwwroot/index.htlm – yes, you will need to create the wwwroot directory.

<!DOCTYPE html>
	<meta charset="utf-8">
	<title>My First Page</title>
<h1>Hello World!</h1>

It’s basically the same code that comes for free when you scaffold a new HTML page in Visual Studio. Except no scaffolding. Also there was no auto-indent. You will miss these things when you don’t use Visual Studio.

Run your Application

You are now ready to run your application. There is no handy “start debugging” key – I get to do it by hand. First of all, start the web server:

k web

It should respond with a single word – Started. Nothing else. Now open a browser and point it to http://localhost:5000/index.html. Note that there is no auto-loading of index.html at the root – I needed to specify the page name. I can probably write a controller in the ASP.NET page to do that for me, but out of the box that’s not going to work.

You should get a nice friendly “Hello World!”.

Press Ctrl+C to shut the server down.

Integrate Bower, NPM and Gulp

Over the past few weeks I’ve become a fan of ECMAScript 6 and LESS to the point where I am going to deal with this up front in my base environment. To do that I need to actually install bower, npm and gulp from scratch. It’s done for you in Visual Studio. Luckily for me this is a one shot thing.

First up is NPM. NPM comes along for the ride with Node. I can use Chocolatey to install Node. First up, open up a PowerShell prompt with Administrative privileges and type the following:

# For servers without WMF5
choco install nodejs.install

# For servers with WMF5
Install-Package -Verbose -Force nodejs.install

If you’ve got your work PowerShell prompt open, close it and re-open it to get the new PATH. You should now have access to the npm command. I’m doing the rest of the work in a normal PowerShell prompt.

Next on my list is bower. Take a look at the Install Bower page. It gives you precise instructions on how to install bower. It’s a one-liner. Of course, Visual Studio has this installed but it doesn’t give you access to the raw command. You just edit bower.json (by hand) and magic things happen. Once you have bower installed you should be able to just run it. Let’s install something with bower – like bootstrap.

bower install bootstrap

Nice and simple. I got that from the Bootstrap github repository. It didn’t create a bower.json file though. For that I need to use bower init. Walk through the questions – here is what mine looks like:


That’s quite a bit more than Visual Studio gives you. Some of it is not strictly needed because I am doing this as a private repo, but it’s still good to install.

My final piece is gulp. I can install this the same way as bower, but again – read the Getting Started Guide on their website for full details.

I do need a Gulpfile.js which I am going to copy from one of my other projects for now:

var gulp = require('gulp'),
	babel = require('gulp-babel'),
	bower = require('main-bower-files'),
	del = require('del'),
	eslint = require('gulp-eslint'),
	less = require('gulp-less'),
	path = require('path'),
	sourcemaps = require('gulp-sourcemaps');

var wwwroot = "wwwroot";

gulp.task("lint", function() {
	return gulp.src(["src/js/**/*.js"])
			globals: {
				"require": true,
				"console": true,
				"$": true
			envs: {
				browser: true,
				es6: true

gulp.task("build:css", function() {
	return gulp.src(["src/less/application.less"])
			paths: [ "src/less" ]
		.pipe(gulp.dest(path.join(wwwroot, "css")));

gulp.task("build:js", function() {
	return gulp.src([ "src/js/**/*.js"])
		.pipe(babel({ modules: "amd" }))
		.pipe(gulp.dest(path.join(wwwroot, "js")));

gulp.task("build:lib", function () {
    return gulp.src(bower(), { base: 'bower_components' })
        .pipe(gulp.dest(path.join(wwwroot, "lib")));

gulp.task("build", [ "build:lib", "build:css", "build:js" ]);

gulp.task("clean", function(cb) {
		path.join(wwwroot, "lib/**"),
		path.join(wwwroot, "js/**"),
		path.join(wwwroot, "css/**")], cb);

That’s a lot of code, but basically it compiles ES6 code into ES5 code, converts LESS stylesheets into CSS stylesheets and installs the library dependencies all in the wwwroot area. I have no package.json file yet. To create that I use npm init which is similar to bower init. First of all, I have to install my dev dependencies:

npm install --save-deps gulp del gulp-less gulp-eslint main-bower-files gulp-babel gulp-sourcemaps

Now that I have some dependencies install I can run npm init. It will ask me a series of questions and at the end it will create the package.json for me. If I come back I can just run npm install and it will restore all the packages for me.

Some final closing things. Firstly, I’ve done the same changes I’ve done in previous articles to bower.json and package.json. The package.json changes were done to support eslint and the bower.json changes were done to support main-bower-files. Secondly, I added the RequireJS dependency to the bower.json file since I’m using it so often.

I also added a small src/js/application.js and src/less/application.less. This was more to test the build system.

The good news is that I can now use this repository as a starting point for my applications. I just have to clone it and then edit the individual JSON files plus Startup.cs for the new names. I can also import this project into Visual Studio if I wish. You can check out all the work on my GitHub Repository.

Now, are you sure you don’t want to follow me back to use Visual Studio?