There are times when one works with a ‘not so popular’ stack of technologies. The stack which I am using for development is one of those. We have a SPA based on Angular JS which consumes .Net Web API through REST services. The icing on the cake is, it uses Windows Authentication, since it is an app designed to be used on the intranet. I had a few hiccups on setting up the development environment mainly due to:
- How to serve my Web API and SPA through IIS with Windows Authentication
Here is how I addressed these issues:
Problem # 1:
I had a completely separate Angular JS client directory and I had to consume a .Net Web API and serve it through IIS so it had to be a part of the same website. After several attempts of structuring, I added a virtual directory to my site on IIS and pointed it to my client directory and aliased it as ‘content’. In easier words, my website contained a folder ‘content’ which contains my client application as a shortcut. Note that the client application physically existed somewhere else. Then I used IIS’s URL Rewriting to rewrite the root of my website to ‘/content’. Similarly any hit to request any static file (html, css, png, ico, js etc) was configured to be rewritten to ‘/content’. Here is a snippet from my web.config file and the URL rewriting rule.
Problem # 2:
After a lot of thinking I came up with a rather obvious solution to this problem :
- configure grunt-contrib-watch to watch for files and reload them on the browser through watch’s livereload configuration
- configure SCSS to CSS compilation through watch’s compass block and configure it for livereload
- open the hosted app off IIS through grunt
- get rid of the connect-livereload all together and place the livereload script on my index.html
By the above steps, I can do all the IIS page serving and authentication and still use grunt for my tasks. Do read grunt-contrib-watch to understand how it works.
Here is a glimpse of what the gruntfile looks like. Note, you have to place your hosted port on the WEB_PORT constant in the gruntfile.
Now, a simple ‘grunt server’ will pop up your application hosted on IIS with all the grunt and livereload magic.
Happy coding 🙂