A very basic OWIN ASP.NET Web API Single Page Application Template

Update 2015-10-22: Since I received a couple of requests to maintain this template for Visual Studio 2015, I’ve published an update to the extension gallery. The source code is now on GitHub

Update 2015-05-12:

Already on Visual Studio 2015 or Visual Studio Code? Check out my blog post on an updated version of this template for VS2015 that uses Yeoman and ASP.NET vNext.

You want to develop a simple Single Page Application (SPA) with ASP.NET Web API as the REST backend in single web project? Read this article and you will never use the standard template again.

Here is the current situation in Visual Studio 2013:

With the Empty you end up with an empty project. That is, no Web API dependencies included, no OWIN configuration, no basic wiring done.

With MVC or Web API you end up with many dependencies and many things you probably do not need in a simple app. The same applies to the built-in ‘Single Page Application’ template.

In addition, all templates mix the OWIN and pre-OWIN web application structure. Very annoying, because it is just confusing people to have a Global.asax and a Startup.cs in a single project and it complicates self host scenarios.

In situations were I introduce my clients to SPA principles these standard templates bring just too much noise and a convoluted project structure.

Instead of using the standard templates, I use a custom template that is inspired by NodeJS. It is based completely on OWIN and Web API 2.2. It uses an OWIN middleware for static file handling and does not rely on IIS at all. This has some nice side effects like being able to declare a specific folder in the project where all my static content (i.e. the SPA) resides.

The structure looks like this:

Some notes on the artifcats:

  • Startup.cs. The OWIN startup configuration. Configures the public folder (see below) and the WebAPI routes. Attribute routing and a default ‘/api/’ route is configured.
  • web.config. Basically disables all intercepting IIS features and sets “runAllManagedModulesForAllRequests” to true. The goal is to let OWIN do its job without having IIS features in play. Even static files are served by OWIN.
  • Controllers folder. The root folder of the WebAPI controllers. Feel free to change your structure according to your needs.
  • public folder. The root of the file system which is mirrored as static file contents via an OWIN middleware.
  • public/index.html. The start page for your SPA.

Note: I did not include any JavaScript libraries or frameworks in the template on purpose. The goal is to have a simple starting point for a simple web project and not to have a starting point for an AngularJS, Meteor or Ember application. You can build that on top if you need.

Next steps when working with the template:

  • Creating JavaScript/CSS artefacts: create a folder ./public/scripts/ or ./public/css and place them there. Same applies to CSS or other static contents.
  • Adding JavaScript 3rd party libraries like AngularJS or Knockout via NuGet or Bower. Personally, I would prefer Bower for this job since it handles a more personalized folder structure pretty well. NuGet currently is not able to store JavaScript or CSS artefacts in specifc folders like “public/scripts” or “public/css”. There is a new Bower integration point for Visual Studio that might help.

Please Note

  • If you plan to use this solution in production, bear in mind that the static file handling of the IIS is disabled and that each request will trigger a managed call. Compared to a native IIS static file handling, the managed pipeline performance is worse.
  • ASP.NET vNext will change the game slightly, but this template is supposed to be one of the use cases that gets even better with ASP.NET vNext. The strict OWIN dependency model should make the forward development easier than using a mixed template (MVC and WebAPI).

Download and Usage

You can download the template from the Visual Studio Extension gallery (direct link). After the VSIX installation search for “owin” and select the template:

Have fun!

Update 11/6/2014

I have updated the VSIX to version 1.1. It includes a couple of fixes and little improvements:

  • New Project GUIDs are now created when activating the template
  • A random IIS Express port is now assigned when activating the template
  • Removed superfluous NuGet packages and updated JSON.NET to latest version.

Update 11/16/2014

I have updated the VSIX to version 1.2. Again, there are some fixes and improvements:

  • Fixed an issue with the NuGet hint path that occurred when you de-selected “Create directory for solution”. Thanks to Kim for reporting this!
  • Made the template ready to use in offline scenarios by adding the NuGet packages to the VSIX.
comments powered by Disqus