Configuring your plain vanilla node-based Azure website

Nov 20th
2013

Creating and deploying a nodeJS based website to Windows Azure is really easy, and can be done with no other tools than a computer, a local installation of git, a web browser and a text editor. You do it like this:

  1. Download nodeJS

  2. Build your website with node

  3. Download and install git

  4. Create a git-repo over your website and commit the files to it

  5. Go to the Windows Azure website and create a new website, based on a local git-repo

  6. Push your repository to the git url of the new created websit.

That's it, your new website is now hosted in a cloud.

What's missing?

Nothing really, but you might run into problems if you for instance are using non-standard hosted fonts, like I am in this website. If you place the fonts in the website, and reference them in your stylesheets, the fonts will not be downloaded to the users browser.

The reason for this is that the server hasn't got any mime types configured for files like .otf and .woff, which means it won't serve the files, when the browser issues a request for them.

The solution to this problem is straight-forward for a seasoned .NET developer: You add mime-types to the IIS configuration using the web.config file in the website, like this:

<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension=".otf" />
            <remove fileExtension=".woff" />
            <mimeMap fileExtension=".otf" mimeType="font/opentype" />
            <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
    </staticContent>
    </system.websServer>
</configuration>

Problem is: You didn't create a web.config file, when you created the website locally, unless you're running your website through IISNode, which really isn't necessary. And if you try to create one containing the configuration above, your new shiny website will go down.

How to solve this

Reality is: When you upload a node-based website to an Azure website, the IIS based web-server needs to do some of it's own configuration, to make the nodeJS website run (using IISNode). The Azure server, will look at your nodeJS application, and create a suitable web.config file for it. So if you create and add a web.config file, you will effectively overwrite the "hidden" web.config file that is there, thereby ruining your website.

So you need another tool: After creating and pushing your website the first time, download and install a ftp-client, grab the ftp-address from your Azure website config pages, go to the ftp, and find and download the web.config file (its in /site/wwwroot). You can add this file to your repo, edit it, and then push again. Remember to put your staticContent node in the right place.

Problem solved.

If you've already created your own web.config file, to solve a problem, and your website isn't answering. Maybe because you read this SO answer. Don't panic, just remove the web.config file from your repo, and push it to Azure, this will make Azure recreate to file. Then download the file and add it as described above.