12 December 2013

Using AngularJS with ServiceStack while keeping ASP.NET MVC in the background

UPDATE: This post is now only valid for ServiceStack v3. ServiceStack v4 has now built in support for a Windows Authentication Provider: https://github.com/ServiceStack/ServiceStack/blob/master/release-notes.md#windows-auth-provider-for-aspnet .

  I mentioned in a previous post the productivity gains on the server side front when using the excellent ServiceStack framework. In this post I want to present a starter application that relies on AngularJS and ServiceStack to provide almost all its functionality while using ASP.NET MVC for very few and specific features.

  Soon after ServiceStack has introduced support for the Razor view engine I started to question why would you use ASP.NET Web Forms or ASP.NET MVC features when similar functionality is now available in ServiceStack? Especially if you use a client side JavaScript framework like Backbone.js, AngularJS or Ember.js - you can now use ServiceStack on its own with no dependencies on ASP.NET.
  However there are some constraints that you need to factor in when you design a web application that needs to integrate with existing systems. I think you cannot rule out completely the ASP.NET Web Forms and ASP.NET MVC frameworks if you answer yes to any of this questions:
  • do you need to use Windows authentication?
  • do you need to expose/reuse ".asmx" web services or WCF endpoints? 
  For my application the answer was yes to all questions and I decided to use the ServiceStack framework in combination with ASP.NET MVC. This allowed me to rely on the built in Windows authentication provided by ASP.NET MVC without having to write any code to support it and to be able to use almost any .NET server side endpoint.
  The application structure has only one server side view created as a result of a default controller action and this view provides just two functions: build the application HTML skeleton by loading the layout file and initiate a single page JavaScript application powered by AngularJS.
  All the application data is loaded by AngularJS resource objects from ServiceStack powered webservices that are secured by the existing ASP.NET authenticated session. With this structure I can create new controller actions, WCF services or even ASP.NET Web Forms pages and use the built in ServiceStack inversion of control container to instantiate any of its registered dependencies.
  One of the highlights of this setup apart from using AngularJS was how easy and seamless I could test all my ServiceStack endpoints using the friendly xBehave.net testing framework and the indispensable test data generation framework AutoFixture.
  Setting this all up was relatively straightforward thanks to many community contributions and the very good ServiceStack documentation. However in order to speed up the process for anyone looking for a similar solution I created a starter project that has all the features I mentioned above. I began with a simple ASP.NET MVC project and I tried to ensure all my subsequent commits are organised in logical steps so you can see how everything was put together.

  The next steps for this project are to add some tests that exemplify how easy is to test ServiceStack endpoints, upgrade to ASP.NET MVC 5 and ServiceStack 4, create a similar project that can be used as an "app for SharePoint" web application.


  • the starter project can be found here;
  • a key part of this project around sharing the ASP.NET session with ServiceStack was taken from a StackOverflow answer.

No comments: