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

Question

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();

The index file:

Browse WebSite :

and the result :

And the postman for test api that was Success :

Amir · Accepted Answer · 2022-09-20 09:57:42Z

5

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();

edited Sep 20, 2022 at 9:57

answered Sep 20, 2022 at 9:49

Amir

1211 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michael Aguilar Over a year ago

Thank you! The tutorial of Microsoft should be updated with this info

Andrew Over a year ago

This also fixed the deploy to Azure for me. Maybe my azure app service settings are wrong I don't know, but this works.

Abdullah Zaydi Over a year ago

Yeah, This is really helpful! I think Microsoft should add this to their official documentation.

buymeacoffee · Accepted Answer · 2022-09-19 10:01:34Z

1

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.

answered Sep 19, 2022 at 10:01

buymeacoffee

22.7k2 gold badges23 silver badges52 bronze badges

6 Comments

Amir Over a year ago

thanks, I test api by postman and it was success but address to site for index.html not work and has error when both project are in one website. the error is "crbug/1173575, non-JS module files deprecated." but when add website to wwwroot it work except fetching from api

buymeacoffee Over a year ago

@Amir If you want get further help, it's better to provide some related error messages and pics.

buymeacoffee Over a year ago

@Amir Pls check the code in your Program.cs file, I want to know what the value in app.MapFallbackToFile(), in my side, it's index.html. And I rename it, then I reproduce your issue.

buymeacoffee Over a year ago

@Amir So pls check the it and can we find the html file under wwwroot folder. Or we can create a simple html file under wwwroot with the same name, then we can get the reason.

Amir Over a year ago

thanks for your friendly effort and guidance .due to last your comment I resolve problem by add app.UseStaticFiles();app.UseRouting();app.UseEndpoints(endpoints => { endpoints.MapControllers(); endpoints.MapFallbackToFile("/index.html"); }); to my program.cs

|

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related