All posts in CSS

Needed to add MP4 video support to an ASP.NET website project. 

Found that adding the following made that work great when I deployed to Azure.

<!-- ====================================================================== -->
<!-- Required to have Videos show up when deployed to Azure  -->
<!-- ====================================================================== -->
<staticContent>
  <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
</staticContent>

Alas, when I refreshed the cache on my browser – all of my CSS and Javascript files would not load, with the dreaded 500 errors.

So apparently, as soon as you add any <staticContent> settings – you need to add all possible settings.  Counter intuitive, so wanted to share the a comprehensive non-trivial fix that worked for me.

If there’s a better way to do this – love to hear it…  Also may be a better way to do this in ASP.NET Core – but for now this is a pre-Core project.

Here’s the solution, hope it helps someone else.  Good coding :)

<!-- ====================================================================== -->
<!-- Required to have Videos show up when deployed to Azure  -->
<!-- ====================================================================== -->
<staticContent>
  <!-- Set expire headers to 30 days for static content-->
  <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00"/>
  <!-- use utf-8 encoding for anything served text/plain or text/html -->
  <remove fileExtension=".css" />
  <mimeMap fileExtension=".css" mimeType="text/css; charset=UTF-8" />
  <remove fileExtension=".js" />
  <mimeMap fileExtension=".js" mimeType="text/javascript; charset=UTF-8" />
  <remove fileExtension=".json" />
  <mimeMap fileExtension=".json" mimeType="application/json; charset=UTF-8" />
  <remove fileExtension=".rss" />
  <mimeMap fileExtension=".rss" mimeType="application/rss+xml; charset=UTF-8" />
  <remove fileExtension=".html" />
  <mimeMap fileExtension=".html" mimeType="text/html; charset=UTF-8" />
  <remove fileExtension=".xml" />
  <mimeMap fileExtension=".xml" mimeType="application/xml; charset=UTF-8" />
  <!-- HTML5 Audio/Video mime types-->
  <remove fileExtension=".mp3" />
  <mimeMap fileExtension=".mp3" mimeType="audio/mpeg" />
  <remove fileExtension=".mp4" />
  <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
  <remove fileExtension=".ogg" />
  <mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
  <remove fileExtension=".ogv" />
  <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
  <remove fileExtension=".webm" />
  <mimeMap fileExtension=".webm" mimeType="video/webm" />
  <!-- Proper svg serving. Required for svg webfonts on iPad -->
  <remove fileExtension=".svg" />
  <mimeMap fileExtension=".svg" mimeType="images/svg+xml" />
  <remove fileExtension=".svgz" />
  <mimeMap fileExtension=".svgz" mimeType="images/svg+xml" />
  <!-- HTML4 Web font mime types -->
  <!-- Remove default IIS mime type for .eot which is application/octet-stream -->
  <remove fileExtension=".eot" />
  <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
  <remove fileExtension=".otf" />
  <mimeMap fileExtension=".otf" mimeType="font/otf" />
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
  <remove fileExtension=".crx" />
  <mimeMap fileExtension=".crx" mimeType="application/x-chrome-extension" />
  <remove fileExtension=".xpi" />
  <mimeMap fileExtension=".xpi" mimeType="application/x-xpinstall" />
  <remove fileExtension=".safariextz" />
  <mimeMap fileExtension=".safariextz" mimeType="application/octet-stream" />
  <!-- Flash Video mime types-->
  <remove fileExtension=".flv" />
  <mimeMap fileExtension=".flv" mimeType="video/x-flv" />
  <remove fileExtension=".f4v" />
  <mimeMap fileExtension=".f4v" mimeType="video/mp4" />
</staticContent>