Run React-App Build on ASP.NET Core 7 WebAPI

Question

I have an ASP.NET Core 7 WebAPI with many routes like:

• domain.com/Api/Product/GetAll
• domain.com/Api/Product/Delete/
• domain.com/Api/Product/Create
• ...

and I have a react-app which i need to use its build folder running on my ASP server like:

• domain.com/my-react-app

I mean I want to use my ASP as react-app Server, how can i do this?

my program.cs:

using Microsoft.Extensions.FileProviders;

string WEB_ROOT_PATH = "Images";

var builder = WebApplication.CreateBuilder(
    new WebApplicationOptions { WebRootPath = WEB_ROOT_PATH }
);

string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
builder.Services.AddControllers();
builder.Services.AddCors(options =>
{
    options.AddPolicy(
        name: MyAllowSpecificOrigins,
        policy =>
        {
            policy.WithOrigins("*").AllowAnyHeader().AllowAnyMethod();
        }
    );
});

builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}
app.UseCors(MyAllowSpecificOrigins);
app.MapGet("/", () => "ok");
app.MapGet("/CheckLocalServer", () => "ok");
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseStaticFiles(
    new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(builder.Environment.ContentRootPath, "Images")
        ),
        RequestPath = "/Upload"
    }
);
app.UseAuthorization();

app.MapControllers();

app.Run();

my Packages:

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net7.0</TargetFramework>
    <Nullable>disable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="7.0.12" />
    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="7.0.14" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="7.0.14">
      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
      <PrivateAssets>all</PrivateAssets>
    </PackageReference>
    <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="7.0.14" />
    <PackageReference Include="Swashbuckle.AspNetCore" Version="6.5.0" />
  </ItemGroup>

  <ItemGroup>
    <Folder Include="Sync\NewFolder\" />
  </ItemGroup>

</Project>

Answer 1

After publish the webapi to folder, create a new folder "wwwroot" in the root directory.
After publish the react app "npm run build" Copy all the published files to the "wwwroot" folder.

Then run the published webapplication.exe, you could visit api and react pages in the same port.
Test with "create-react-app" template and "dotnet new webapi" template (add app.UseStaticFiles();):