Migrated to Azure & Ghost

So after years of hosting my blog (if four posts can really be called that?) on a cheap windows hosting plan I decided to move it, along with everything else I currently have hosted all over the place onto a single Azure Standard instance.

This meant moving a number of sites and domains into their own Azure Web Apps, the process was actually pretty simple thanks to the pretty user friendly UI of the new (to me anyway) Azure portal. I have been impressed with the performance. Although none of the sites I am hosting have any heavy load they are all working nicely on this one single instance. Will have to see if this remains the case if I ever think of something to create that requires a bit of power to run. One thing that was lost was the email hosting provided by the previous web host, although it was nothing special. To replace that I have set up a few accounts at zoho where you can create email addresses on your own domain for free.

New Site Configuration

Simple Sites

For the couple of site I host for family, as I am the “IT guy”, it was simply a case of create the Web App, setup the custom domain by configuring the DNS CNAME and A records on the domain registrar and then setting up and FTP username and password in Azure and uploading the files.

Ghost Setup

This blog has been moved from the standard wordpress install that came included with my old host onto ghost. All I had to do was click the Deploy to Azure button on the AzureWebApp Ghost-Azure project and select the settings in Azure that I required. After that was finished I just logged into the ghost admin and imported the content that I had exported from my old blog using a plugin which unfortunately I cannot remember the name of. The final step was to add the disqus comments back into the blog, which I did by following the steps on ghostforbeginners.com. The actual final step that I only just remembered after checking my google analytics was to add rewrite rules to the web.config to redirect from the old wordpress URLs to the new ghost ones. As there were only four posts I just wrote a rule for each but otherwise I would have taken more time to write one rule that covered all the posts.

Azure Continuous Deployment

One thing I wanted to try out was the continuous deployment feature in Azure. So for my company website I added the files to a bitbucket repository and configured the deployment in Azure. The steps for this could not really be much easier:

  • Select the Web App under App Services
  • Click Continuous Deployment under Settings > Publishing Continuous Deployment Link
  • Click Choose Source under the new Continuous Deployment section Continuous Deployment Choose Source
  • Select the source of your files from the list. I chose Bitbucket Continuous Deployment Sources
  • You will then be prompted to authorize Azure to access the source. This may require logging in, if you do not already have a a saved login – Finally, choose the project and branch to deploy from*. Continuous Deployment Project Settings
  • Then when you click the Ok button Azure will do a deployment of the current state of the selected branch

*This applies to Bitbucket and Github, for other sources the settings will likely be different

Added HTTPS and Browser Security Headers

I have been wanting to improve my web security skills so using my own blog as test bed seems to make sense, especially as it is now hosted in Azure so that means I’ll be learning how to manage that as well as security concepts.

Although as this blog is now running on ghost I am trusting that it handles a large number of security issues on its own so for playing with concepts in .NET I will spin up another test Web App in Azure.

The first place I have started thanks to Troy Hunt’s excellent blog and pluralsight videos is adding HTTPS and one of the Browser Security Headers (HSTS) to this site.

I followed the instructions here to generate a free SSL certificate and upload it to the Azure Web App hosting this. Note, the UI on StartSLL.com has improved drastically since the original post and is much more user friendly.

Then following this Pluralsight video I have added the HSTS header to my site by adding them to the web.config:

<configuration> 
  <system.webServer> 
    <httpProtocol> 
      <customHeaders> 
        <add name="Strict-Transport-Security" value="max-age=31536000; includeSubdomains; preload" /> 
      </customHeaders> 
    </httpProtocol>

I will look into adding the others in the future but this seemed like a good start.

SerializationException error when bundling .less files with Cassette

I have been using the Cassette bundling library as it is a single library which handles all of my bundling requirements, of which the main ones are that is must handle .less files and create bundles at build time rather than on the server.

Almost everything is working fine except when I first added a .less file to a bundle. When building, it failed and displayed this error: The "CreateBundles" task failed unexpectedly. System.Runtime.Serialization.SerializationException: Unable to find assembly 'Cassette.Less, Version=2.4.2.13845, Culture=neutral, PublicKeyToken=null'.

First I checked that I had definitely loaded the correct nuget package for processing .less files and that the DLL was actually being copied to the bin directory. I had and it was. So I tried running it without the MSBuild step, this showed me the actual error that was happening when trying to process my .less files. After fixing this issue and re-enabling the MSBuild step it worked perfectly. If you encounter this error, check that your .less file is valid and try running without MSBuild.

After checking existing issues it looks like this is caused by the exception inside of Cassette.Less not being serialized properly. I have raised an issue here – https://github.com/andrewdavey/cassette/issues/458

Returning data retrieved via a jQuery ajax request

One of the most frequent questions that I see asked under the jQuery tag on stack overflow is > Why is this value undefined?

function makeAjaxCall() { 
    $.get('/GetData', function(result) { return result; }); } 
    var test = makeAjaxCall(); 
    alert(test); // this will alert undefined
}

The simple answer is that because this is an Ajax request the function will not wait for the result of the $.get call before returning so the result will be undefined. There is a wrong way and a right way to get around this:

The WRONG way

To wrong way is to do the Ajax request manually (using $.ajax) and set the async property to false.
However this is then not really an ajax request as it will wait for the result before continuing. This is from the jQuery documentation:
Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

The RIGHT way The right way is to use the callback functions the way they were meant to be used. This is to handle the result of your Ajax request, the simplest way is just to put your logic inside the success function itself:

function makeAjaxCall() { 
    $.get('/GetData', function(result) { alert(result); }); 
} 
makeAjaxCall(); // this will alert the result

Another option would be to pass in a function that will perform this logic to the function that performs the ajax request. This creates a better separation of logic:

function makeAjaxCall(callback) { 
    $.get('/GetData', function(result) { // this will call the callback and pass the result callback(result); }); 
} 

makeAjaxCall(function(result) { // similar to above, this will alert the result but the // ajax function has no knowledge of what needs to be done alert(result); }); 

The ability to pass functions around as variables is one of the best features of JavaScript and is definitely the most appropriate solution to this problem.

jQuery Extended Hover Plugin

During my frequent (possibly too frequent!) browsing of [Stack Overflow](http://www.stackoverflow.com) I came across this [question](http://stackoverflow.com/questions/7316629/jquery-techniques-for-extending-perimeter-for-mouseout/7316978#7316978). The main requirement being the ability to change the hover event behavior so that the mouseOut function is not called until the mouse is moved 10 pixels outside of the div. This would probably be quite simple to solve by overlaying another hidden div and binding the mouseOut event to that, however the question states that this is not the desired solution.

Although I do not necessarily think this is a good idea it got me interested to see if it was even possible, so I quickly knocked up a script in [jsbin](http://jsbin.com/exulef/2/edit) and it worked! So I posted it as an answer, shame it didn’t get any up votes.

With the script working I decided it would make sense to turn into a plugin just in case anybody else would ever want this functionality and I just like to practice plugin writing whenever I can.

Here is an example of the plugin working, note the text changes to ‘Inside’ when the mouse enters the div, but does not change to ‘Outside’ until it is 10 pixels outside the div:

Download [jquery-hoverExtend.js](/wordpress/scripts/jquery-hoverExtend.js)

Autofac WcfIntegration – Service not registered with the Autofac container

Today was my first time trying to setup Autofac with WcfIntegration.

Following the instructions to the letter (almost!) I couldn’t get it to work.

I was getting the error:

> The service ‘MyService’ configured for WCF is not registered with the Autofac contain

My config was fairly simple, but I still tried changing this for a good hour!

var builder = new ContainerBuilder();
builder.Register(c => new PNRResolverService(c.Resolve()));
builder.RegisterType();
AutofacHostFactory.Container = builder.Build();

After much googling and turning up no results I went back to the [wiki](http://code.google.com/p/autofac/wiki/WcfIntegration) and checked the comments (Yes, I probably should have done this first).

I found my answer six comments down!

> it looks like you need to use the fully-qualified name of your service in the .SVC file

Looks like I missed a small but very important part of the example in the wiki

> And your .svc file would specify the appropriate service implementation type and host factory, like this:

<%@ ServiceHost Service="TestService.Service1, TestService" Factory="Autofac.Integration.Wcf.AutofacServiceHostFactory, Autofac.Integration.Wcf" %>

Note the Service="TestService.Service1, TestService"

I changed that one tiny bit of my .svc file from MyProject.MyService to MyProject.MyService, MyProject and it worked perfectly!