Configurating your web.config when your SPA and API are on the same App Service on Microsoft Azure

Recently I encountered the problem, that we had both, the API and the Frontend Application on the same App Service on Microsoft Azure. For the Frontend we used Vue, so we had the problem that the internal routing was not working as it is an SPA.

So whenever we changed the route and reloaded the page, we had an error that stated:

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable

which makes sense, as a specific file or folder is searched for, but it is physically not existing as it is only an internally used route by your app.

What we did, was creating a web.config to manage the internal routing dependent on keywords. If the Filename starts with ‘api/’, it lets the request to the API go through. Everything else is rewritten to the index.html in wwwroot.

Our web.config file then looked like this:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                 <rule name="let api requests through"    stopProcessing="true">
                    <match url="(.*)" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" pattern="api(.*)$"/>
                    </conditions>
                    <action type="Rewrite" url="{REQUEST_URI}" appendQueryString="true" />
                </rule>
                <rule name="redirect to ui" stopProcessing="false">
                    <match url="(.*)" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}"/>
                    </conditions>
                    <action type="Rewrite" url="index.html" appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

I hope this helps as we were struggling with this problem for quite some time.