How To deploy asp.net core web api project with react(standalone) in visual studio 2022

Viewed 78

I just follow https://github.com/MicrosoftDocs/visualstudio-docs/blob/main/docs/javascript/tutorial-asp-net-core-with-react.md to publish my project to local folder and then add new web site on iis. but I don`t know how browse the index.html that created in wwwroot folder to work with api, browsing result to : No webpage was found for the web address: http://localhost:7080/wwwroot/index.html HTTP ERROR 404

Should two separate sites be created on iis?

Program.cs :

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();
app.UseAuthorization();

app.MapControllers();

app.Run();

enter image description here

The index file:

enter image description here

Browse WebSite :

enter image description here

and the result :

enter image description here

And the postman for test api that was Success :

enter image description here

2 Answers

In short, you don't need to deploy separately. Of course, you can deploy them separately if you need them.

We can see from the .csproj file what actions were done when it was released, and the project of the react front-end was placed under wwwroot, so the project under wwwroot can be deployed separately or directly from the deployed asp.net core project.

enter image description here

enter image description here

I changed program.cs to below and it worked!

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

app.UseAuthorization();

//app.MapControllers();
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();

    // route non-api urls to index.html
    endpoints.MapFallbackToFile("/index.html");
});

app.Run();
Related