ASP.NET Core 6.0 with SPA, handle InvalidOperationException

Question

I'm trying to create a small application using ASP.NET Core 6.0 with ReactJS and WebView2 for learning purposes. I published and it is running without problem, if I will run it by itself or from CMD. As soon as I'm trying to run it using another application it fails most of the time and gives me this error:

System.InvalidOperationException: The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request. Your application is running in Production mode, so make sure it has been published, or that you have built your SPA manually. Alternatively you may wish to switch to the Development environment.

at Microsoft.AspNetCore.SpaServices.SpaDefaultPageMiddleware.<>c__DisplayClass0_0.b__1(HttpContext context, RequestDelegate next) at Microsoft.AspNetCore.Builder.UseExtensions.<>c__DisplayClass1_1.b__1(HttpContext context) at Microsoft.AspNetCore.SpaServices.SpaDefaultPageMiddleware.<>c__DisplayClass0_0.b__0(HttpContext context, RequestDelegate next) at Microsoft.AspNetCore.Builder.UseExtensions.<>c__DisplayClass1_1.b__1(HttpContext context) at Microsoft.AspNetCore.Routing.EndpointMiddleware.Invoke(HttpContext httpContext) at Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context) at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

I tried building with Debug, Production, Any CPU, x86, x64. Tried also:

public static class ApplicationBuilderExtensions
{
    public static IApplicationBuilder UseRootRewrite(this IApplicationBuilder builder)
    {
        var socks = "/sockjs-node";

        builder.Use(async (context, next) =>
        {
            if (!HttpMethods.IsGet(context.Request.Method) && !context.Request.Path.StartsWithSegments(socks))
            {
                if (!context.Response.HasStarted)
                {
                    context.Response.StatusCode = 404;
                    context.Response.CompleteAsync().GetAwaiter().GetResult();
                    return;
                }
            }
            
           await next();
        });

        return builder;
    }
}

Used like this:

public class Startup() {
    ...
    
    public void Configure(IApplicationBuilder app) {
        app.UseRootRewrite();
        app.UseSpa(config => {});
    }
}

Many other suggestions from all over the internet but it seems I couldn't find any solution for my application.

Maybe someone can help in handling this error.

Tiffany · Answer

After two days of struggling, I found out what was wrong with my application. Since I was running it from the parent application, the child application somehow acquired the parent application's path, and of course, in the parent application's folder, there was no ClientApp/build directory. Instead of putting the ClientApp/build folder in the parent application's directory, I change the path inside the child application's source like this:

AddSpaStaticFiles

// In production, the React files will be served from this directory
services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "Parent-dir/Child-dir/ClientApp/build";
    Console.WriteLine(configuration.RootPath);
});

UseSpa

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "Parent-dir/Child-dir/ClientApp";

    if (env.IsDevelopment())
    {
        spa.UseReactDevelopmentServer(npmScript: "start");
    }
});

In the future, I will try to make this better but for now, this solved my problem.

ASP.NET Core 6.0 with SPA, handle InvalidOperationException

1 Answers