ASP.NET Core - 从不同端口同时服务 API 和 SPA React

Question

It is possible to serve both an API and a Single Page Application (SPA) React/Redux from different ports in ASP.NET Core. I found some post here ASP.NET Core - Serve both API and SPA from the same port that asks for serving from the same port, I would like to serve them on different ports because I would like to implement Azure B2C Authentication(so my spa can safely communicate with web api). I generated a boiler plate that includes react spa with .net web api but it is in one solution by default. Not sure if I should generate .net core web api and react app in a separate projects but when I run the application it serves both spa and webapi on the port that is configured in launchSettings.json for web api. In Startup.cs i have

 services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/build";
        });

  app.UseSpaStaticFiles();

  app.UseSpa(spa =>
        {
            if (env.IsDevelopment())
            {
                spa.UseReactDevelopmentServer(npmScript: "start");
            }
        });

I tried to add "homepage": "https://localhost:3000", to package.json of react.app I also tried to add spa.Options.DefaultPage = "https://localhost:3000" I also tried spa.UseProxyToSpaDevelopmentServer("https://localhost:3000"); But none of that works. Is there something like a Nuget package or maybe some extra trick with configuration or should I give up on the boiler plate and create 2 independent projects(1 create-react-app and then generate a default web api project). Thanks

Answer 1

Different from the template for ASP.NET Core with React.js, React.js and Redux is using .net core3.1 so it doesn't have.env file. In that file you can set the running port of your project.
According to the MS document , I think React.js and Redux project is using middleware to compile the functions code first then put them to the static web page and display it. The following code do this part of job:

app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    if (env.IsDevelopment())
    {
        spa.UseReactDevelopmentServer(npmScript: "start");
    }
});

When you start the project in VS, you can see the port number in the browser, which is the running port of the whole project. So you think the API and SPA are running on the same port. From my perspective, API is using middleware to invoke SPA.

You can use command line code npm start in the ClientApp File to run the SPA as an independent project, it will run it on the default port 3000. Here is the screenshot of my test: