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

I've tried your `package.json` but it works for me. My best guess is your `node_modules/` is broken. Could you please remove the `node_modules/` folder and perform `npm i`? If it doesn't work , try `npm run build` before starting the server. — itminus, Feb 25 '19 at 08:42
For Googlers: I had the same issue, practically overnight. Intellisense frequently butchers my entire ClientApp build process so I attempted deleting the .vs-folder, which didn't work. Turns out that Visual Studio required an update, and running it + restart + clean and build resolved the issue for me. (VS2019 and .NET Core 3.1). — Beltway, Jan 13 '21 at 10:58

score 13 · Accepted Answer · answered Apr 14 '19 at 19:18

13

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");
    }
 });

answered Apr 14 '19 at 19:18

Muhammad Usama Ashraf

564
1
5
20

I get a `The name 'TimeSpan' does not exist in the current context` – pmiranda Apr 08 '20 at 04:00
This is an old answer I am Working on ASP.Net 2.1 at that Time – Muhammad Usama Ashraf Apr 08 '20 at 04:02
I'm working on netCore 2.2 right now, with a ReactJS front – pmiranda Apr 08 '20 at 04:02
1

TimeSpan is in the System namespace. Do you Included It – Muhammad Usama Ashraf Apr 08 '20 at 04:06
2

Thanks, now works (using System;), sorry, I have been dealing with 10 minutes in .net (and 3 years in angular, react...) – pmiranda Apr 08 '20 at 04:10

Careerwale Job Portal · Answer 2 · 2020-10-26T08:40:19.793

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

In a command prompt, switch to the ClientApp subdirectory, and launch the CRA development server: cd ClientApp npm start
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

score 0 · Answer 3 · answered Jul 14 '23 at 20:58

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

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

3 Answers3

Linked