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?

Please be more specific on which Azure service did you use for hosting your site - Azure App Service\Azure Storage\Azure VM? — itaysk, Aug 15 '17 at 20:16
@itaysk 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. — Konrad Viltersten, Aug 15 '17 at 20:40

score 60 · Accepted Answer · edited Jan 15 '20 at 18:41

60

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>

edited Jan 15 '20 at 18:41

Dan Sinclair

907
1
9
27

answered Aug 16 '17 at 07:38

itaysk

5,852
2
33
40

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? – Konrad Viltersten Aug 16 '17 at 08:51
1

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. – Konrad Viltersten Aug 16 '17 at 11:25
3

@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 – Cairo Aug 08 '19 at 11:53

score 2 · Answer 2 · answered Nov 01 '18 at 15:27

2

You can install an extension for your Azure App Service:

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

answered Nov 01 '18 at 15:27

Johnny Qian

668
7
14

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

2 Answers2