Web.config for hosting a Vue.js SPA in Azure Web Apps

Hosting a Vue.js SPA (single page application) within a Azure Web Apps instance? Specifically, the Windows version (not the Linux container version)? Let me show you how to configure the web.config.

A web.config is required to host the content. It’s for two reasons:

  1. It tells IIS how to handle routing of URLs. The vue-router documentation has information
  2. Your project may, like mine, may have different file types  i.e. woff and woff2 font files. The web.config can mark as known MIME types. These are lines 4 to 7 in the web.config below
The woff files will show up with a 404 status in the console, as in this picture. 

Below is the web.config with everyone you need to fix both cases.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: