Frontend not available when front and back on same Web App Azure

I have a project with frontend (Angular) and backend (.NET 8). They are both deployed on the root of a Web App in Azure through Azure Devops. The content of the server seems correct.

To put in perspective, we migrated backend from .NET framework to .NET 8. Before it worked but now doesn't seem to work properly on the server, in local it runs ok.

I tried this: How to deploy angular app and web API in same azure app service?, but without success.

The problem appears when configuring the web.config.

If I setup the web.config with accessing only json or font files, I can access this files and see the web application with an error as the backend returns a 404 because I haven't configured it in the web.config:

<configuration>
  <location path="." inheritInChildApplications="false">
    <system.webServer>
        <staticContent>
          <mimeMap fileExtension=".json" mimeType="application/json" />
          <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
          <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
        </staticContent>
    </system.webServer>
  </location>
</configuration>

Once I add the backend configuration then the the server directly returns a 404 with this message in console:

Failed to load resource: the server responded with a status of 404 ()

Just like if frontend didn't exist.

The configuration I added for the backend is:

<handlers>
    <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
</handlers>
<aspNetCore processPath="dotnet" arguments=".\Epea.Api.dll" 
       stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" 
       hostingModel="inprocess" />

With this minimum content Swagger is accessible but not frontend.

I have tried almost everything, adding rewrite section with rules to Redirect, but the frontend doesn't seem to be accessible as the application always returns a 404.

The program.cs is normal apart from using app.UseStaticFiles();.

Am I missing something in this file or may it be related with the web app configuration?

Modify the path="*" in the <handlers> section is the key to distinguishing between API routes and frontend files.

When you add the <handlers> and <aspNetCore> configuration, IIS assumes that every request (including those for Angular static files) should be handled by the backend application, which causes a 404 for frontend resources.

Configure Web.config:

<configuration>
  <system.webServer>
    <!-- ASP.NET Core handler for the backend -->
    <handlers>
      <add name="aspNetCore" path="api/*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
    </handlers>

    <!-- ASP.NET Core settings -->
    <aspNetCore processPath="dotnet" arguments=".\Epea.Api.dll" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" hostingModel="inprocess" />

    <!-- Serve static files -->
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>

    <!-- Rewrite rules for Angular frontend and backend API -->
    <rewrite>
      <rules>
        <!-- Serve Angular static files -->
        <rule name="Static Files" stopProcessing="true">
          <match url=".*" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" />
          </conditions>
          <action type="None" />
        </rule>

        <!-- Route API requests to the backend -->
        <rule name="Backend API" stopProcessing="true">
          <match url="^api/(.*)" />
          <action type="Rewrite" url="/{R:0}" />
        </rule>

        <!-- Fallback to Angular's index.html for frontend routes -->
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

• These above settings are required for .NET 8 backend processing. All requests matching the API routes (e.g., /api/*) will be processed by the backend.

Backend should set up to serve static files.

Program.cs:

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

// Serve static files for the Angular app
app.UseStaticFiles();

// Enable routing and map controllers
app.UseRouting();
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
});

app.Run();

Web App Configuration:

/site/wwwroot/
  index.html
  main.js
  styles.css
  Epea.Api.dll

If the backend and Angular frontend files are in separate directories. deployment merges into the Web App's root directory (/site/wwwroot). check that with out any conflicts.