ASP.Net Core 3.0 web application and Vue time out exception Visual Studio 2019 v16.4

Question

I just started learning Vue, so I created an ASP.Net core 3.0 web application with client side of Vue.js, when I host web it take too long to be up at the end I got the below exception,

TimeoutException: The vue-cli server did not start listening for requests within the timeout period of 0 seconds. Check the log output for error information. VueCliMiddleware.TaskTimeoutExtensions.WithTimeout(Task task, TimeSpan timeoutDelay, string message)

and the stack is :

VueCliMiddleware.TaskTimeoutExtensions.WithTimeout(Task task, TimeSpan timeoutDelay, string message) Microsoft.AspNetCore.SpaServices.Extensions.Proxy.SpaProxy.PerformProxyRequest(HttpContext context, HttpClient httpClient, Task baseUriTask, CancellationToken applicationStoppingToken, bool proxy404s) Microsoft.AspNetCore.Builder.SpaProxyingExtensions+<>c__DisplayClass2_0+<b__0>d.MoveNext() Microsoft.AspNetCore.Routing.EndpointMiddleware.g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger) Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context) Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

I searched the problem, they suggested to increase the timeout like below:

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
    if (env.IsDevelopment())
    {
        spa.Options.StartupTimeout = new TimeSpan(days: 0, hours: 0, minutes: 1, seconds: 30);
        spa.UseAngularCliServer(npmScript: "start");
    }
});

But my app isn't Angular it is Vue.

Update 1:
Part of package.json:

{
  "name": "asp-net-core-vue-starter",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

By running npm start in client directory I have got the below prompts:

npm ERR! missing script: start

npm ERR! A complete log of this run can be found in:

npm ERR! C:\x.log

and the log content:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'start'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose stack Error: missing script: start
4 verbose stack at run (C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:155:19)
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:63:5
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:116:5
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:435:5
4 verbose stack at checkBinReferences_ (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:391:45)
4 verbose stack at final (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:433:3)
4 verbose stack at then (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:161:5)
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:281:12
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\graceful-fs.js:115:16
4 verbose stack at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
5 verbose cwd I:\hospital\hospitalrun2\HospitalReport\ClientApp
6 verbose Windows_NT 10.0.18363
7 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
8 verbose node v13.3.0
9 verbose npm v6.13.1
10 error missing script: start
11 verbose exit [ 1, true ]

After fixing JavaScript exceptions I still get that above timeout exception, I published the app, there is no timeout exception in production, I don't know what is going wrong in debug mode.

It doesn't matter its vue or angular. Compiling takes more time than default timeout. And the timeout period of 0 seconds sounds weird. Try to measure your cli run time with manually starting with npm start in the console. — Eldar
I did npm start in ClientApp directory and got mssion script: start, see update. — Aria
Great, by running that command client side app hosted on port 8080, and specified that there are three bugs in my Typescript code, I fixed them and Client Side hosted, since the FE needs the BE apis the client is incomplete, BTW unfortunately I still have mentioned problem(Timeout exception). — Aria
spa middleware is framework agnostic. It doesn't matter you use angular or not. Rising timeout will make asp.net core to wait for development server (in your case its vue development server). I don't know what template you are using but i don't think your issue is timeout. If you can share your Startup.cs it would be more helpful. And this article provides good insight for hosting vue app in asp.net core. — Eldar

Andrew Andrew · Accepted Answer · 2020-01-06T19:00:26

This can be caused by any simple javascript or typescript syntax error when initializing Vue objects or similar.

The vue-cli server did not start listening for requests within the timeout period of 0 seconds. Check the log output for error information.

To solve the issue

Attempt to restart the vue server via command line in the command prompt (npm run serve in my case). A proper error message should display, hopefully showing the exact location of a syntax error.

Fix the error and restart server.

Other solution:

When there is no syntax error, ending all Node.js processes before starting the server again (eg. in task manager or by command line) fixes it for me

ASP.Net Core 3.0 web application and Vue time out exception Visual Studio 2019 v16.4

1 Answers