Im my last post I highlighted the need for architects to be producers which amongst other things, means architects need to be comfortable with their sleeves rolled up, writing code. Sometimes this is a challenge because there is not enough time in the day to learn every new technology. I’m always looking for short cuts.

Over the last year it became apparent that my knowledge of JavaScript libraries and SPA (Single Page Application) architecture was limited. I was going through one the PluralSight courses, Building Web Apps & Services with Entity Framework and Web API, and the Hot Towel SPA accelerator was mentioned. This seemed like a good starting point for my learning.

Hot Towel provides Visual Studio Templates for rapidly creating SPAs which are based on a number of JavaScript libraries and frameworks. I wanted to get this up and running on Visual Studio 2015 but I hit a few snags. Looking at the blog and the GitHub repository I could see that there had been no activity for some time which meant that it was very unlikely that the project had been tested with VS 2015. In particular the VSIX project templates did not work. Undeterred I forged ahead with my attempt to get the template application up and running. What follows are the steps I took.

Getting Started

Without the project templates you have to start from a MVC application. So create a New ASP.NET Web Application and select the MVC Template.

Installing via NuGet Package Manager

If you search for HotTowel in NuGet you’ll get several hits. The one I used was HotTowel.Angular.Breeze.

NuGet

After installing this package you’ll notice that a folder called app has been added to your web project. This is the client side JavaScript SPA.

AppFolder

Starting the application

Set the project’s start page to Index.html in the root folder and run the project. You’ll see the following

startup1

This isn’t right!

The application gets stuck on this page because some components are missing. Behind the scenes there are JavaScript errors which point you to the missing bits. Hit F12 in your browser to pull up the development tools.

startup1_error

The error points to module ‘ngAnimate’ being unavailable. This means the Angular Animate package is missing. You’ll find that if you correct this there will be more errors. To cut a long story short there are three packages missing

  • AngularJS.Animate
  • AngularJS.Route
  • AngularJS.Sanitize
NuGet Angular

Back in NuGet you’ll notice all three are present but they have the blue upgrade arrow next to them. Update all three packages and run rerun the application.

working

You should now have a working Hot Towel based SPA with all the necessary packages managed through NuGet. Time to start exploring.

Advertisements

One thought on “Setting up Hot Towel with Visual Studio 2015

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s