How to use React with Web API?

Question

I want to make some project, with frontend on React & backend on ASP.NET Core. I want, that when I develop it uses node server, but also I want to have possibility to build it as one project(API will on /api route, and client will be on root).

I read this https://learn.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-6.0?view=aspnetcore-6.0 And they write, that

The startup code for the ASP.NET Core app no longer needs any single-page app-specific logic. The logic for starting the front-end development server during development is injecting into the app at runtime by the new Microsoft.AspNetCore.SpaProxy package.

I created new web project(dotnet new web). Add Microsoft.AspNetCore.SpaProxy package. But it can't find UseSpa extension method. What's the problem or maybe it's better way to do what I want ?

    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.SpaProxy;
    
    var builder = WebApplication.CreateBuilder(args);
    var app = builder.Build();
    
    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "../giftbox-front";
    
        if (env.IsDevelopment())
        {
            spa.UseReactDevelopmentServer(npmScript: "start");
        }
    });
    app.MapPost("/api/submit", () => "Submit");
    app.Run();

Almost solved it. Add package Microsoft.AspNetCore.SpaServices.Extensions. And wrote

using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer;

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "../giftbox-front";

    if (app.Environment.IsDevelopment())
    {
        spa.UseReactDevelopmentServer(npmScript: "start");
    }
});
app.MapPost("/api/submit", () => "Submit");
app.Run();

It works, I see frontend in browser, but the problem is in my API. When I make request to /api/submit(I change MapPost to MapGet to test it in browser directly) it doesn't return anything. Looks like React server takes my request. How can I fix it ?

@RuikaiFeng if I write app.MapGet("/api/submit", () => "Submit"); before app.UseSpa, nothing happens. It still returns nothing on /api/submit — moskalenko2k24
– moskalenko2k24, Commented Jul 25, 2022 at 19:06

Ruikai Feng · Accepted Answer · 2022-07-26 17:58:52Z

2

refered this link:How to return 404 on wrong API url? (ASP.NET Core + SPA)

try as below to avoid the request prefixed with /api been taken by server,and see if there're any other errors.

app.MapWhen(x => !x.Request.Path.Value.StartsWith("/api"), builder =>
{
    builder.UseSpa(spa=>
    {
        .....
    });
});

answered Jul 26, 2022 at 17:58

Ruikai Feng

12.5k1 gold badge7 silver badges16 bronze badges

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

1 Comment

moskalenko2k24 Over a year ago

Thank you for answer, but even with this, regardless of where I put app.MapGet (with my API), before or after app.MapWhen, looks like all requests come to react server.

Collectives™ on Stack Overflow

How to use React with Web API?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related