Angular app on Azure Web app fails with “The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.”

Question

I just published an Angular app to Azure Web Apps, after confirming general operation locally. However, I now get the following error (HTTP Error 404.0 - Not Found), specifically the D:\home\site\wwwroot\bin\www file:

However, using the Kudu tools, I can see that the file is indeed there:

What could cause this error?

Answer 1

By default, IIS blocks serving content from certain folders, including bin. You can either a) move the www folder out of the bin directory, or b) you could add the following configuration to the web.config:

<configuration>
    <system.webServer>
        <security>
            <requestFiltering>
                <hiddenSegments>
                    <remove segment="bin" />
                </hiddenSegments>
            </requestFiltering>
        </security>
    </system.webServer>
</configuration> 

Answer 2

The 404.0 Error on bin\www was a bit of a misdirection. After putting a console.log in the www file and watching output, I found out that indeed bin\www was being called properly. The problem was further in and related to the serving of static content, initially the index.html file.

I was previously using the following to serve up index.html:

var serveStatic = require('serve-static');
...
app.use(serveStatic('.', { 'index': ['index.html'] }));

For some reason, while this worked locally, this didn't work once published to Azure Web App. So I decided to use a method that had worked for others. First I moved index.html to /public, and then used express.static:

app.use(express.static(__dirname + '/public'));

It should also be noted, that the associated web.config file must also have information related to the static content, for example: How to enable static files (and less support) when hosting a nodejs app within IIS using IISNode