Blockchain • Metaverse • X-Platform Developer

Set Azure Web App MIME Types

When running web apps using Azures App Service Plan you may occasionally run into a problem where files or resources you have uploaded are not found even though they are where they should be. This usually results in a 404 error.

This can be down to MIME types. "Multipurpose Internet Mail Extensions" are a way of identifying files on the Internet. They describe the media type of content in either email or served by web servers or web apps and are intended to help guide a web browser in how the content is to be processed and displayed.

There are various ways of setting MIME types for your app but I find the quickest way is by defining them within your Web Apps web.config file. This works on Windows and Linux app service plans as both support web.config files. 

Here's an example that shows how to serve MIME types for 

  • SVG
  • JSON
  • MP4
  • WEBM
  • OGV
  • WOFF / WOFF2 Fonts
  • Minified JavaScript files ending in extension .js.min
<system.webServer>
    <staticContent>
      <remove fileExtension=".svg" />
      <remove fileExtension=".json" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
      <mimeMap fileExtension=".webm" mimeType="video/webm" />
      <mimeMap fileExtension=".ogm" mimeType="video/ogv" />
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" /> 
      <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" /> 
      <mimeMap fileExtension=".js.min" mimeType="text/javascript" /> 
    </staticContent>
</system.webServer>

A comprehensive list of MIME types can be found here.

CLOUD ARCHITECT • FULL STACK DEVELOPER