I have React application running in ASP.NET Core project and want to run both at the same time

Question

I created a default React/.NET Core project in Visual Studio and my launchSettings.json looks like this:

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:28087",
      "sslPort": 44341
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "TTMApp": {
      "commandName": "Project",
      "launchBrowser": true,
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

How do I run both the port 5001 api server and the React server at port 44341 at the same time? If I type dotnet-run it runs the 5001 app, but if I click "Start" or "IIS Express" in Visual Studio, it runs the 44341 React app. Is there a way to run both at the same time so I can test React queries to the API located at the 5001 port?

I've run React with Node and you can use Concurrently to run both at the same time, I'm just not sure how to achieve this in .Net Core without creating separate projects for React and for the API. I just have the OOB React Project from Visual Studio and it looks like it created everything in one project albeit with the React code at one port and the API at another.

Ehsan Kenari · Accepted Answer · 2022-04-02 17:11:35Z

3

open Startup.cs and take a look at the configure method code.

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

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

do you have this configuration? this way, the dotnet run command runs the react development in the background

answered Apr 2, 2022 at 17:11

Ehsan Kenari

1314 bronze badges

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

2 Comments

jmath412 Over a year ago

Yes, I do have that, and I can access my React routes, thank you for referring me to that. I guess Visual Studio adds that boilerplate in there. Is there a reason why the React application is being served on port 5001 and not 44341?

Ehsan Kenari Over a year ago

hi, React application doesn't serve on port 5001. There is a proxy between asp development server and webpack(react) development server.

Collectives™ on Stack Overflow

I have React application running in ASP.NET Core project and want to run both at the same time

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related