ASP.NET Core - Serve both API and SPA React from different port

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

I created the sample project via templates, the default setting is running the webapi and spa in different ports. Since that's what you want, why would you like to change the port of it? — Jason
– Jason, Commented Jan 17, 2023 at 8:02
@XiaotianYang how did you create the sample project, by default both of my projects run on the same port. I created that using Visual Studio template for ASP.NET core with React.js and Redux — Vladimir
– Vladimir, Commented Jan 17, 2023 at 8:31
Sorry, I mistook the project as ASP.NET Core with React.js. I will write another answer latter. — Jason
– Jason, Commented Jan 18, 2023 at 5:45

Jason · Accepted Answer · 2023-01-18 06:47:31Z

3

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:

answered Jan 18, 2023 at 6:47

Jason

6021 gold badge4 silver badges7 bronze badges

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

1 Comment

Vladimir Over a year ago

@Xiatian Yang thank you very much Xiaotian, it works fine, also I realised there were some compilation problems that were not displayed when running it before so can fix them, I am assuming that if I want to publish it I can just add the env. file as you mentioned

Collectives™ on Stack Overflow

ASP.NET Core - Serve both API and SPA React from different port

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