TimeoutException: Asp.net Core 2.2 with react , requests timeout period of 50 seconds

Question

When I run the Project with the VS 2017 on IIS Server the Timeout Exception occurs

TimeoutException: The create-react-app server did not start listening for requests within the timeout period of 50 seconds.

My package.json File

{
  "name": "Invest_Me",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.12",
    "@fortawesome/free-brands-svg-icons": "^5.7.0",
    "@fortawesome/free-regular-svg-icons": "^5.7.0",
    "@fortawesome/free-solid-svg-icons": "^5.6.3",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "bootstrap": "^4.2.1",
    "jquery": "^3.3.1",
    "node-sass": "^4.11.0",
    "react": "^16.0.0",
    "react-dom": "^16.7.0",
    "react-redux": "^5.1.1",
    "react-router-bootstrap": "^0.24.4",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.8",
    "react-scripts": "^2.1.3",
    "reactstrap": "^7.1.0",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "rimraf": "^2.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.3.3",
    "@babel/plugin-transform-react-jsx": "^7.3.0",
    "@storybook/addon-actions": "^4.1.12",
    "@storybook/addon-links": "^4.1.12",
    "@storybook/addons": "^4.1.12",
    "@storybook/react": "^4.1.12",
    "ajv": "^6.0.0",
    "babel-eslint": "^9.0.0",
    "babel-loader": "^8.0.5",
    "cross-env": "^5.2.0",
    "eslint": "5.12.0",
    "eslint-config-react-app": "^2.1.0",
    "eslint-plugin-flowtype": "^2.50.3",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.11.1"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

I have also try the solution of .UseKestrel(...)

Program.cs

public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
                WebHost.CreateDefaultBuilder(args)
                    .UseStartup<Startup>()
                    .UseKestrel(o => { o.Limits.KeepAliveTimeout = TimeSpan.FromMinutes(10); });

but the error exist

Stacktrace

System.TimeoutException: The create-react-app server did not start listening for requests within the timeout period of 50 seconds. Check the log output for error information.
   at Microsoft.AspNetCore.SpaServices.Extensions.Util.TaskTimeoutExtensions.WithTimeout[T](Task`1 task, TimeSpan timeoutDelay, String message)
   at Microsoft.AspNetCore.SpaServices.Extensions.Proxy.SpaProxy.PerformProxyRequest(HttpContext context, HttpClient httpClient, Task`1 baseUriTask, CancellationToken applicationStoppingToken, Boolean proxy404s)
   at Microsoft.AspNetCore.Builder.SpaProxyingExtensions.<>c__DisplayClass2_0.<<UseProxyToSpaDevelopmentServer>b__0>d.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at Microsoft.AspNetCore.Routing.EndpointMiddleware.Invoke(HttpContext httpContext)
   at Microsoft.AspNetCore.Routing.EndpointRoutingMiddleware.Invoke(HttpContext httpContext)
   at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

How to increase the timeout of the create-react-app server

it work fine when i try to run npm start in ClientApp folder by cmd

Answer 1

For MacOS Ventura:

In Visual Studio Community 2022 for Mac sometimes when you try to run React App on .net show this error:

TimeoutException: The create-react-app server did not start listening for requests within the timeout period of 120 seconds. Check the log output for error information. Microsoft.AspNetCore.SpaServices. Extensions.Util. TaskTimeoutExtensions. With Timeout (Task task, TimeSpan timeoutDelay, string message)

If you have installed node.js with Homebrew or nvm only add in your terminal:

sudo ln -s "$(which node)" /usr/bin/node
sudo ln -s "$(which npm)" /usr/bin/npm

I base myself on these post:

https://stackoverflow.com/a/26320915/8183226

Problem verifying node installation in m1 pro mac while setting up Visual Studio

Answer 2

you can use system.TimeSpan. But issue has not been resolved. Still getting below error message. "TimeoutException: The create-react-app server did not start listening for requests within the timeout period of 0 seconds. Check the log output for error information."

Solution :

You can use below link This will resolve the issue. https://learn.microsoft.com/en-us/aspnet/core/client-side/spa/react?view=aspnetcore-3.1&tabs=visual-studio

1. In a command prompt, switch to the ClientApp subdirectory, and launch the CRA development server: cd ClientApp npm start
2. Modify your ASP.NET Core app to use the external CRA server instance instead of launching one of its own. In your Startup class, replace the spa.UseReactDevelopmentServer invocation with the following: spa.UseProxyToSpaDevelopmentServer("http://localhost:3000"); Press F5

Answer 3

For setting the StartupTimeout of create-react-app

Add these Startup.cs Configure method

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
    if (env.IsDevelopment())
    {
        spa.Options.StartupTimeout = TimeSpan.FromSeconds(120);
        spa.UseReactDevelopmentServer(npmScript: "start");
    }
 });