I’m relatively new to Azure deployments, but the more I use them, the more I like the service. Unfortunately, it’s not WYSIWYG with deployments. What you see on IIS Express when development is not always what you’ll get after an Azure deployment. One issue I’ve come across is the MIME mappings aren’t the same, or don’t exist at all, and that’s preventing various file types, such as SVG images and WOFF2 fonts from being served. I also noticed that fixing Azure’s MIME mapping busted my AngularJS support in IIS Express – whoops!
Using the magic of web.config transforms, we can fix this for our release deployments. If you expand your web.config file, you’ll see web.Debug.config and web.Release.config. These files enable you to insert, replace, and remove settings based on your build configuration. Obviously, if you had multiple build configs, such as for different hosting environments, you’d insert those config names in addition web.*.config files.
To add SVG support, we need to insert our additional MIME types into the web.config. There’s no reason to do this in the master web.config, because it’s only necessary during release. This same tactic works very well for swapping the SMTP mail mailSettings section based on the hosting environment’s needs. For example, I swap localhost, where I use PaperCut to monitor sent email, to the actual settings upon deployment.
Below, you’ll see the fully modified web.Release.config from a recent deployment. This one worked perfectly for adding SVG and some missing font file extension support. You’ll notice I’m adding a new section under <system.webServer>. Note that I do not mark the webServer tag with an xdt:Transform. I don’t want to replace the entire section. I simply need to add the staticContent section to override some of the settings already configured in Azure. There are other options for xdt:Transform, such as Remove and Replace. This is a very powerful feature and I encourage you to learn more about it from Microsoft.
<staticContent xdt:Transform="Insert">
I hope this helps!
Snippet
<?xml version="1.0"?>
<!-- For more information on using Web.config transformation visit http://go.microsoft.com/fwlink/?LinkId=301874 -->
<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
<system.webServer>
<!-- Add support for video files and other non-standard file request types. This breaks AngularJS support in IISExpress, hence why it's here instead. -->
<staticContent xdt:Transform="Insert">
<!-- if you don't remove certain extensions first, the site won't load, whoops! -->
<remove fileExtension=".svg" />
<remove fileExtension=".svgz" />
<remove fileExtension=".eot" />
<remove fileExtension=".ttf" />
<remove fileExtension=".woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".mp4" mimeType="video/mp4" />
<mimeMap fileExtension=".ogv" mimeType="video/ogg" />
<mimeMap fileExtension=".webm" mimeType="video/webm" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml"/>
<mimeMap fileExtension=".svgz" mimeType="image/svg+xml"/>
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
</system.webServer>
</configuration>
Auri's Blog 