Using React for the client-side of an ASP.NET Core application

Intro

This time, I will try using React for the client-side of my ASP.NET Core application.

I want to build the client-side code and the server-side code separately, because they will rarely be changed at the same time.

• first).
  
  
  

  
  
  
  Program.cs
  

  
  
  
  
  
  
  

  CODE Kopieren

  using System.Text.Json.Serialization;
  
  using Microsoft.Extensions.FileProviders;
  
  using NLog;
  
  using NLog.Web;
  
  ...
  
      builder.Services.AddSpaStaticFiles(configuration =>
  
      {
  
          if (builder.Environment.EnvironmentName == "Development") 
  
          {
  
              configuration.RootPath = "office-file-accessor";
  
          }
  
          else
  
          {
  
              configuration.RootPath = "office-file-accessor/dist";
  
          }
  
      });
  
      builder.Services.AddControllers()
  
          .AddJsonOptions(options =>
  
          {
  
              options.JsonSerializerOptions.ReferenceHandler = ReferenceHandler.IgnoreCycles;
  
          });
  
      var app = builder.Build();    
  
      app.UseRouting();
  
      app.MapStaticAssets();
  
  
  
      // To allow the application to load React files other than the index.html, such as JavaScript and CSS.
  
      if (builder.Environment.EnvironmentName != "Development")
  
      {
  
          app.UseStaticFiles(new StaticFileOptions {
  
              FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "office-file-accessor/dist")),
  
              RequestPath = ""
  
          });
  
      }    
  
      app.MapControllers();
  
      app.UseSpa(spa =>
  
      {
  
          if (builder.Environment.EnvironmentName == "Development") 
  
          {
  
              spa.Options.SourcePath = "office-file-accessor";
  
              spa.UseProxyToSpaDevelopmentServer("http://localhost:5173");
  
          }
  
          else
  
          {
  
              spa.Options.SourcePath = "office-file-accessor/dist";
  
          }
  
      });
  
      app.Run();
  
  ...
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  Vollständiger Original-Bericht

  Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

  ↗ Original-Artikel auf dev.to lesen