How to expose and serve WOFF file from Azure without web.config?

Question

I'm serving a static site (really Angular but all the bundles are static as well as the index-html) in Azure. It works as supposed to except a single thing. For some reason the WOFF files aren't being exposed properly.

The solution for it as far my google-foo goes is to edit the web.config in a way similar to this blog or this one and a similar suggestions are all over the place.

Here's the tricky part: I don't have a config in my deployment. It's just a bunch of files (a few HTMLs, JSs and CSSs - and the darn WOFF). How can I make Azure application serve all static content, including WOFFs?

Astronomy

Please be more specific on which Azure service did you use for hosting your site - Azure App Service\Azure Storage\Azure VM? – Signe

@Signe Sorry, didn't realize the significance. Azure App Service. I created a service using web client. Then cloned a BitBucket project and set it up as Static. – Astronomy

Answer 1

I don't have a config in my deployment

You can just add a web.config file at the root folder of your app with the following contents.

<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension="woff" mimeType="application/font-woff" />
      <mimeMap fileExtension="woff2" mimeType="application/font-woff2" /> 
    </staticContent>
  </system.webServer>
</configuration>

Signe

Oh, that simple? I've read in one of the blogs that doing so will override the web.config created for me automagically by Azure. It was claimed that there's one provided by default if none is uploaded to the server. Perhaps I was mistaken? – Astronomy

Confirmed now - your suggestion works (I've taken the liberty to complete it with the contents for future, lazy readers). Now, my issue is that the file is removed from the dist directory upon a build but that's material for another question. – Astronomy

@KonradViltersten you can add the web.config file into assets configuration of the angular build: "assets": ["src/assets", "src/favicon.ico", "src/web.config"] and it will get included in your dist folder – Albuminate

Answer 2

You can install an extension for your Azure App Service:

https://github.com/johnnyqian/enable-font-awesome-site-extension

Thimble