Blank Page after deploying ASP.NET Core with reactjs application on IIS

Question

I try to use VS template "ASP.NET Core with React.js" to create an web application.

But when I deploy the application to IIS on my Windows 10 machine and open the application in my browser, the page stays blank. When I run the application in the debugger, everything works fine.

The code is basically the unchanged code from the VS template. I just added some controllers and models. The .NET Core hosting bundle is installed on the machine.

The Microsoft documentation did not help in this case.

The browser developer tools console returns the following:

My web.config

<?xml version="1.0" encoding="utf-8"?>  
<configuration>  
  <location path="." inheritInChildApplications="false">  
    <system.webServer>  
      <handlers>  
        <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />  
      </handlers>  
      <aspNetCore processPath=".\Application.exe" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" hostingModel="inprocess" />  
    </system.webServer>  
  </location>  
</configuration>  

I checked the Startup.cs. But it looks good to me:
public class Startup
{
public Startup (IConfiguration configuration)
{
Configuration = configuration;
}

        public IConfiguration Configuration { get; }  
  
        // This method gets called by the runtime. Use this method to add services to the container.  
        public void ConfigureServices (IServiceCollection services)  
        {  
  
            services.AddControllersWithViews ();  
  
            // In production, the React files will be served from this directory  
            services.AddSpaStaticFiles (configuration =>  
             {  
                 configuration.RootPath = "ClientApp/build";  
             });  
  
            services.AddHttpContextAccessor ();  
            services.Configure<DbConfig> (Configuration.GetSection ("DB"));  
            services.AddTransient<IDbContext, DbContext> ();  
        }  
  
        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.  
        public void Configure (IApplicationBuilder app, IWebHostEnvironment env)  
        {  
            if (env.IsDevelopment ())  
            {  
                app.UseDeveloperExceptionPage ();  
            }  
            else  
            {  
                app.UseExceptionHandler ("/Error");  
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.  
                app.UseHsts ();  
            }  
  
            app.UseHttpsRedirection ();  
            app.UseStaticFiles ();  
            app.UseSpaStaticFiles ();  
  
            app.UseRouting ();  
  
            app.UseEndpoints (endpoints =>  
             {  
                 endpoints.MapControllerRoute (  
                     name: "default",  
                     pattern: "{controller=Home}/{action=Index}/{id?}");  
  
                 //endpoints.MapFallbackToController ("Index", "Home");  
             });  
  
            app.UseSpa (spa =>  
             {  
                 spa.Options.SourcePath = "ClientApp";  
  
                 if (env.IsDevelopment ())  
                 {  
                     spa.UseReactDevelopmentServer (npmScript: "start");  
                 }  
             });  
        }  
    }  

I would be very thankful for tips that will lead me in the right direction.

Answer 1

The browser is not finding the react files. The errors show that index.html is expected to be hosted as a root site.

If you are replying to vdir rather than the root, you need to configure the react build

https://create-react-app.dev/docs/deployment/#building-for-relative-paths