Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to configure dotnet core 3 to serve up React SPA while using Http.sys and a URLPrefix?

After changing the URLPrefix I get the following error:

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.

Something thus is required to tell dotnet core about the prefix but I can't seem to find the right combination of settings.

Help much appreciated.

The code is below:

HostBuilder is setup with:

public static IHostBuilder CreateHostBuilder(string[] args) =>
Host.CreateDefaultBuilder(args)
    .ConfigureWebHostDefaults(webBuilder =>
    {
        webBuilder.UseHttpSys(options =>
        {
            options.AllowSynchronousIO = false;
            options.Authentication.Schemes = AuthenticationSchemes.None;
            options.Authentication.AllowAnonymous = true;
            options.MaxConnections = null;
            options.MaxRequestBodySize = 30000000;
            options.UrlPrefixes.Add("http://localhost:5005/Product/Site");
        });
        webBuilder.UseStartup<Startup>();
    });

ConfigureServices:

public override void ConfigureServices(IServiceCollection services)
{
  services.AddRazorPages();

  services.AddSpaStaticFiles(configuration =>
  {
    configuration.RootPath = "ClientApp/build";
  });

  services.AddMvc();
  services.AddResponseCompression(opts =>
  {
    opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
              new[] { "application/octet-stream" });
  });
}

And then Configure is:

      app.UseSpaStaticFiles();
      app.UseRouting();
      app.UseEndpoints
      (
        endpoints =>
        {
          endpoints.MapControllerRoute(
              name: "default",
              pattern: "{controller}/{action=Index}/{id?}");
        }
      );

      app.UseSpa(spa =>
      {
        //spa.Options.DefaultPage = reactPath + "/index.html";
        spa.Options.DefaultPage = "/index.html";

        spa.Options.SourcePath = "ClientApp";


      });
like image 963
Steven T. Cramer Avatar asked Feb 19 '20 15:02

Steven T. Cramer


People also ask

How do I add a React to an existing NET Core project?

To use publish, create your JavaScript project using Visual Studio 2022 version 17.3 or later. In Solution Explorer, right-click the ASP.NET Core project and choose Add > Project Reference. Select the React project and choose OK.

Can I use ASP net with React?

ReactJS.NET makes it easier to use Facebook's React and JSX from C# and other . NET languages, focusing specifically on ASP.NET MVC (although it also works in other environments). It supports both ASP.NET 4 (with MVC 4 or 5), and ASP.NET Core MVC. It is cross-platform and can run on Linux via Mono or .

What means ASP.NET Core?

ASP.NET Core is a cross-platform, high-performance, open-source framework for building modern, cloud-enabled, Internet-connected apps. With ASP.NET Core, you can: Build web apps and services, Internet of Things (IoT) apps, and mobile backends. Use your favorite development tools on Windows, macOS, and Linux.


1 Answers

This appears to be an issue where the path to the actual static files is lost. In your StaticFilesOptions ensure that you are providing a File provider with the path to your index.html static files.

spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
            {
              FileProvider = new PhysicalFileProvider
              (
                @"<YourPath>"
              )
            }

Further details for these options can be found in Microsoft's documentation.

https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-3.1

like image 71
Benjamin Grebner Avatar answered Sep 30 '22 04:09

Benjamin Grebner