Closed TLKG closed 2 years ago
More details, 1) the API terminal is good as before. 2) Angular UI terminal seems something about npm not recognizing:
Executing task: swa start http://localhost:4200 --api-location=http://localhost:7071 --run="npm start" --devserver-timeout=90000 <
[run]
[run] Usage: npm
Terminal will be reused by tasks, press any key to close it.
Four files under .vscode
:
{
"recommendations": [
"ms-azuretools.vscode-azurefunctions"
]
}
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Node Functions",
"type": "node",
"request": "attach",
"port": 9229,
"preLaunchTask": "func: host start"
}
]
}
{
"azureFunctions.deploySubpath": "api",
"azureFunctions.postDeployTask": "npm install (functions)",
"azureFunctions.projectLanguage": "JavaScript",
"azureFunctions.projectRuntime": "~3",
"debug.internalConsoleOptions": "neverOpen",
"azureFunctions.preDeployTask": "npm prune (functions)"
}
{
"version": "2.0.0",
"tasks": [
{
"type": "func",
"command": "host start",
"problemMatcher": "$func-node-watch",
"isBackground": true,
"dependsOn": "npm install (functions)",
"options": {
"cwd": "${workspaceFolder}/api"
}
},
{
"type": "shell",
"label": "npm install (functions)",
"command": "npm install",
"options": {
"cwd": "${workspaceFolder}/api"
}
},
{
"type": "shell",
"label": "npm prune (functions)",
"command": "npm prune --production",
"problemMatcher": [],
"options": {
"cwd": "${workspaceFolder}/api"
}
}
]
}
cc @alexweininger
Are there any updates to this issue? I am experiencing the exact same thing. Can no longer test via VS Code.
Hi, I have worked out something rather bizarre.
When I debug from VS Code (with the default Azure SWA configuration), the first thing output to console is:
> Executing task: swa start http://localhost:4200 --run="npm start" --devserver-timeout=90000 <
I then get to
[swa] - Waiting for http://localhost:4200 to be ready
[swa] ✖ Waiting for http://localhost:4200 to be ready
[swa] Could not connect to "http://localhost:4200". Is the server up and running?
[swa] node "C:\Users\MyUserName\AppData\Roaming\npm\node_modules\@azure\static-web-apps-cli\dist\msha\server.js" exited with code 0
exactly like OP is describing. Entering http://localhost:4280
in a browser goes nowhere.
However, if I take the exact task that is output, i.e. swa start http://localhost:4200 --run="npm start" --devserver-timeout=90000
and run this myself from the shell, that works perfectly fine?
The VS Code integration is broken somehow.
EDIT: I have SWA CLI version 0.8.3 and my static web app is using Angular. I don't know if that latter detail is relevant, but it's a commonality between me and OP.
Still the same
发自我的iPad
在 2022年4月8日,上午2:16,Nathan @.***> 写道:
Are there any updates to this issue? I am experiencing the exact same thing. Can no longer test via VS Code.
— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.
However, if I take the exact task that is output, i.e.
swa start http://localhost:4200 --run="npm start" --devserver-timeout=90000
and run this myself from the shell, that works perfectly fine?
@alexweininger would it be possible to help investigate this issue? it looks like it's related to the VS Code extension.
@Orionsgate Manual run of swa start http://localhost:4200 --run="npm start" --devserver-timeout=90000
resulting 502 (Bad Gateway)
.
This is my workaround:
npm run build -prod
swa start dist/ui -api-location api
http://localhost:4280
Source
tab to set breakpoints and debug Angular UI here.Add Configuration
, choose Node: Attach by Process ID
, accept default and save this file.Attach by Process ID
, anyone from the list is fine, set breakpoint and debug API backend inside VSC.I'll investigate this soon, could this be related to the 0.8.3 release?
@TLKG @Orionsgate
Unfortunately I'm not able to reproduce this issue and I think they could be unrelated, if you could provide what you can out of the following that would help me investigate this bug further.
npm --version
node --version
Thanks!
@alexweininger Really appreciate it. It's a private repository, but 2 - 5 are provided as below:
node-fetch
:
{
"name": "ui",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~12.1.4",
"@angular/cdk": "^12.1.4",
"@angular/common": "~12.1.4",
"@angular/compiler": "^12.1.4",
"@angular/compiler-cli": "^12.1.4",
"@angular/core": "^12.1.4",
"@angular/forms": "~12.1.4",
"@angular/material": "^12.1.4",
"@angular/platform-browser": "~12.1.4",
"@angular/platform-browser-dynamic": "~12.1.4",
"@angular/router": "~12.1.4",
"@azure/ai-form-recognizer": "^3.2.0",
"@azure/msal-angular": "^2.1.1",
"@azure/msal-browser": "^2.22.0",
"@azure/storage-blob": "^12.8.0",
"@swimlane/ngx-datatable": "^19.0.0",
"angularx-social-login": "^4.0.1",
"bootstrap": "^4.6.0",
"crypto-js": "^4.1.1",
"dotenv": "^16.0.0",
"formidable": "^2.0.1",
"google-auth-library": "^7.11.0",
"googleapis": "^95.0.0",
"into-stream": "^5.1.1",
"jose": "^4.6.0",
"jquery": "^3.6.0",
"jsonwebtoken": "^8.5.1",
"jwt-decode": "^3.1.2",
"moment": "^2.29.1",
"ngx-currency": "^2.5.2",
"ngx-image-cropper": "^3.3.5",
"ngx-image-zoom": "^0.6.0",
"ngx-quill": "^14.2.0",
"ngx-spinner": "^10.0.1",
"ngx-webcam": "^0.3.2",
"node-fetch": "^2.6.7",
"parse-multipart": "^1.0.4",
"pg-promise": "^10.11.1",
"quill": "^1.3.7",
"quill-image-resize": "^3.0.9",
"quill-image-resize-module": "^3.0.0",
"quill-mention": "^3.0.4",
"rxjs": "^6.6.7",
"save": "^2.4.0",
"streamify": "^1.0.0",
"tslib": "^2.0.0",
"util": "^0.12.4",
"uuid": "^8.3.2",
"zone.js": "^0.11.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1102.6",
"@angular/cli": "^12.1.4",
"@angular/language-service": "~12.1.4",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.3",
"typescript": "^4.2.4"
}
}
3. The output of the following commands:
`npm --version`: 6.14.15
`node --version`: v14.18.0
4. The entire output shown in terminal
Terminal 1:
Executing task: npm install <
npm WARN api@1.0.0 No description npm WARN api@1.0.0 No repository field. npm WARN api@1.0.0 No license field.
audited 339 packages in 4.021s
38 packages are looking for funding
run npm fund
for details
found 20 vulnerabilities (4 low, 5 moderate, 10 high, 1 critical)
run npm audit fix
to fix them, or npm audit
for details
Terminal will be reused by tasks, press any key to close it.
Executing task: func host start <
Azure Functions Core Tools Core Tools Version: 3.0.3904 Commit hash: c345f7140a8f968c5dbc621f8a8374d8e3234206 (64-bit) Function Runtime Version: 3.3.1.0
[2022-04-12T22:09:07.250Z] Debugger listening on ws://127.0.0.1:9229/e069fff2-f445-4e17-8778-1351ad131ae1 [2022-04-12T22:09:07.254Z] For help, see: https://nodejs.org/en/docs/inspector
Functions:
A000_GetImage: [GET] http://localhost:7071/api/uploads/{filename}
A01_doc_AddUpdate1Doc: [POST] http://localhost:7071/api/v2/addorupdate1doc
A02_doc_FetchHistory: [POST] http://localhost:7071/api/v2/fetchdochistory
A03_GetMyProfile: [POST] http://localhost:7071/api/v2/getmyprofile
A04_LogIn: [POST] http://localhost:7071/api/login
A05_doc_Search: [POST] http://localhost:7071/api/v2/searchdoc
A06_doc_ToggleBoolean: [POST] http://localhost:7071/api/v2/toggle1booleaninhd
A07_UpdateMyProfile: [POST] http://localhost:7071/api/v2/updatemyprofile
A09_HF_Add1RorC: [POST] http://localhost:7071/api/v2/add1rorc
A10_HF_AddUpdate: [POST] http://localhost:7071/api/v2/shareaddupdate
A11_HF_ThisShare_Get: [POST] http://localhost:7071/api/v2/thisshare
A12_HF_ThisShare_CA_Update: [POST] http://localhost:7071/api/v2/thisshare_ca_update
A13_HF_ThisShare_Contact_UpdateNAdd: [POST] http://localhost:7071/api/v2/thisshare_contact_updatenadd
A14_HF_ThisShare_MA_Update: [POST] http://localhost:7071/api/v2/thisshare_ma_update
A15_HF_ThisShare_GetContact: [POST] http://localhost:7071/api/v2/thissharegetcontact
A16_doc_UploadImageOCR: [POST] http://localhost:7071/api/v2/uploads
A17_LogOut: [POST] http://localhost:7071/api/logout
A18_HF_Share_Search: [POST] http://localhost:7071/api/v2/share_search
A19_DisclaimerAccept: [POST] http://localhost:7071/api/disclaimeraccept
TestAPI: [GET,POST] http://localhost:7071/api/TestAPI
testdb: [POST] http://localhost:7071/api/testdb
testup: [GET,POST] http://localhost:7071/api/testup
For detailed output, run func with --verbose flag.
info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
Request starting HTTP/2 POST http://127.0.0.1:62448/AzureFunctionsRpcMessages.FunctionRpc/EventStream application/grpc
info: Microsoft.AspNetCore.Routing.EndpointMiddleware[0]
Executing endpoint 'gRPC - /AzureFunctionsRpcMessages.FunctionRpc/EventStream'
[2022-04-12T22:09:08.028Z] Worker process started and initialized.
[2022-04-12T22:09:08.368Z] Debugger attached.
[2022-04-12T22:09:12.029Z] Host lock lease acquired by instance ID '0000000000000000000000005D5E7623'.
Terminal 2:
Executing task: swa start http://localhost:4200 --api-location=http://localhost:7071 --run="npm start" --devserver-timeout=90000 <
[run]
[run] Usage: npm
Terminal will be reused by tasks, press any key to close it.
5. The entire output shown in the terminal run `swa start http://localhost:4200 --run="npm start" --devserver-timeout=90000` command manually:
[run] [run] > ui@0.0.0 start C:\Users\me\Documents\UI_Static_API [run] > ng serve [run] [swa] - Waiting for http://localhost:4200 to be ready [swa] ✔ Connected to http://localhost:4200 successfully [swa] [swa] Using dev server for static content: [swa] http://localhost:4200 [swa] [swa] [swa] This CLI is currently in preview and runs an emulator that may not match the [swa] cloud environment exactly. Always deploy and test your app in Azure. [swa] [swa] [swa] Azure Static Web Apps emulator started at http://localhost:4280. Press CTRL+C to exit. [swa] [swa] [run] - Generating browser application bundles... [run] ✔ Browser application bundle generation complete. [run] [run] Initial Chunk Files | Names | Size [run] vendor.js | vendor | 9.20 MB [run] styles.css, styles.js | styles | 666.05 kB [run] polyfills.js | polyfills | 584.27 kB [run] main.js | main | 312.70 kB [run] scripts.js | scripts | 211.30 kB [run] runtime.js | runtime | 6.15 kB [run] [run] | Initial Total | 10.94 MB [run] [run] Build at: 2022-04-12T22:25:29.042Z - Hash: 050fdb070b8d6eae1732 - Time: 42871ms [run] [run] Warning: C:/Users/me/Documents/UI_Static_API/src/app/main/main.component.ts is part of the TypeScript compilation but it's unused. [run] Add only entry points to the 'files' or 'include' properties in your tsconfig. [run] [run] Warning: C:/Users/me/Documents/UI_Static_API/src/app/sidebar/sidebar.component.ts is part of the TypeScript compilation but it's unused. [run] Add only entry points to the 'files' or 'include' properties in your tsconfig. [run] [run] Warning: C:/Users/me/Documents/UI_Static_API/src/app/svc/live-data-passing-among-components.service.ts is part of the TypeScript compilation but it's unused. [run] Add only entry points to the 'files' or 'include' properties in your tsconfig. [run] [run] Warning: C:/Users/me/Documents/UI_Static_API/src/environments/environment.prod.ts is part of the TypeScript compilation but it's unused. [run] Add only entry points to the 'files' or 'include' properties in your tsconfig. [run] [run] [run] [run] Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ [run] [run] [run] √ Compiled successfully.
@TLKG
I missed this in the original issue, but the following line from the debugging output from Terminal 2 is interesting:
[run] cd "C:\Users\me\Documents\UI_Static_API\" && npm exited with code 1
This tells me the SWA CLI is trying to run cd "C:\Users\me\Documents\UI_Static_API\" && npm
on the terminal, which is oddly missing the npm start
from the command input.
Could you share the value of your terminal.external.windowsExec
setting? This is where terminal tasks are executed in and if different from your integrated terminal, it could cause issues.
@manekinekko any ideas? We haven't changed anything on the extension side.
@alexweininger checking my VSC setting: C:\WINDOWS\System32\cmd.exe
checking my VSC setting:
C:\WINDOWS\System32\cmd.exe
@TLKG what is your integrated terminal running? PowerShell, CMD, WSL, something else...?
Can you try running the command in command prompt (CMD)? swa start http://localhost:4200 --run="npm start" --devserver-timeout=90000
@alexweininger Once terminal is opened, shows PowerShell 7.2.0
CMD run swa start http://localhost:4200 --run="npm start" --devserver-timeout=90000
:
[run]
[run] > ui@0.0.0 start C:\Users\me\Documents\UI_Static_API
[run] > ng serve
[run]
[swa] - Waiting for http://localhost:4200 to be ready
[run] - Generating browser application bundles...
[swa] ✔ Connected to http://localhost:4200 successfully
[swa]
[swa] Using dev server for static content:
[swa] http://localhost:4200
[swa]
[swa]
[swa] This CLI is currently in preview and runs an emulator that may not match the
[swa] cloud environment exactly. Always deploy and test your app in Azure.
[swa]
[swa]
[swa] Azure Static Web Apps emulator started at http://localhost:4280. Press CTRL+C to exit.
[swa]
[swa]
[run] ✔ Browser application bundle generation complete.
[run]
[run] Initial Chunk Files | Names | Size
[run] vendor.js | vendor | 9.20 MB
[run] styles.css, styles.js | styles | 666.05 kB
[run] polyfills.js | polyfills | 584.27 kB
[run] main.js | main | 312.70 kB
[run] scripts.js | scripts | 211.30 kB
[run] runtime.js | runtime | 6.15 kB
[run]
[run] | Initial Total | 10.94 MB
[run]
[run] Build at: 2022-04-12T23:46:11.941Z - Hash: 050fdb070b8d6eae1732 - Time: 17094ms
[run]
[run] Warning: C:/Users/me/Documents/UI_Static_API/src/app/main/main.component.ts is part of the TypeScript compilation but it's unused.
[run] Add only entry points to the 'files' or 'include' properties in your tsconfig.
[run]
[run] Warning: C:/Users/me/Documents/UI_Static_API/src/app/sidebar/sidebar.component.ts is part of the TypeScript compilation but it's unused.
[run] Add only entry points to the 'files' or 'include' properties in your tsconfig.
[run]
[run] Warning: C:/Users/me/Documents/UI_Static_API/src/app/svc/live-data-passing-among-components.service.ts is part of the TypeScript compilation but it's unused.
[run] Add only entry points to the 'files' or 'include' properties in your tsconfig.
[run]
[run] Warning: C:/Users/me/Documents/UI_Static_API/src/environments/environment.prod.ts is part of the TypeScript compilation but it's unused.
[run] Add only entry points to the 'files' or 'include' properties in your tsconfig.
[run]
[run]
[run]
[run] ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
[run]
[run]
[run] √ Compiled successfully.
@TLKG thanks for the quick replies, I'll investigate this and report back.
@alexweininger As discussed offline, here is a task configured to work
{
"version": "2.0.0",
"tasks": [
{
"type": "shell",
"problemMatcher": [
"$swa-watch"
],
"label": "swa: start react-basic 2",
"command": "swa",
"args": [
"start",
"http://localhost:3000",
"--run",
"npm start",
"--devserver-timeout",
"90000"
]
}
]
}
Thank you @alexweininger @nturinski for taking the time to investigate this issue. I am sorry I missed the notifications for this thread.
@alexweininger I am not sure we've changed the behavior of the --run
options on our side in 0.8.3
. Did you manage to find the root cause of this issue?
I am not sure we've changed the behavior of the
--run
options on our side in0.8.3
. Did you manage to find the root cause of this issue?
Yeah, we have the fix ready for it.
@alexweininger What is the fix and is it available for download?
How and where is it fixed? This issue was closed with no comment or reference and the problem still persists in the current versions.
@TLKG @sa-schiefer apologies for the lack of communication. The fix hasn't been merged or released in the Azure Static Web Apps extension yet.
We'll track this issue in https://github.com/microsoft/vscode-azurestaticwebapps/issues/644
@TLKG @sa-schiefer, I have a development build which includes the fix for this bug. If you want to verify that it fixes the issue for you, follow these steps to install it:
1.66.0
or greater.F1
or Command/Ctrl + Shift + P
), run the "Extensions: Install from VSIX..." command.@alexweininger I can confirm that it works in this version. When will this be available publicly? Thank you!
I can confirm that it works in this version. When will this be available publicly? Thank you!
@sa-schiefer Awesome! We're planning to release next week.
Confirming this is still an existing issue in March 2023, no fix has been released yet. The above steps did not fix my issues.
Hi @AArkwellTB, the original issue was caused by strings not being escaped properly when sent to the shell. Is that the same issue you're experiencing?
It would help us investigate if you opened a new issue and provided details and information about your specific environment there.
If you are unable to connect to "http://localhost:4200/" and see an error message, it could mean that the server is not running or there is a configuration issue. Here are some steps you can take to troubleshoot the problem:
Check if the server is running:
Ensure that the server application (e.g., a development server like Angular's, React's, or another custom server) is running on your machine. Start the server if it is not already running. For example, if you are using Angular, run ng serve in the command prompt or terminal from your project's root directory. If you are using React, run npm start or yarn start. Verify the port number:
Double-check that the server is set to run on port 4200, as specified in the URL. Some development servers might use different default ports or may have been configured to use a custom port. Check your project's configuration files or the terminal output when starting the server to ensure the correct port is being used. Check firewall or security settings:
Your firewall or security software might be blocking the connection to port 4200. Check your firewall settings and make sure that the port is not blocked. You may need to create a rule or exception to allow traffic through port 4200. Restart the server:
Sometimes, the server may not start correctly, or it may be stuck in an unstable state. Try stopping the server (usually by pressing Ctrl+C in the terminal where it is running) and then starting it again.
I found a workaround by downgrading Node from 18 to 16, so it must be some conflict with new Node for my particular issue. A downgrade fixes all SWA local deployment issues.
@AArkwellTB you are correct. I randomly ran into this issue twice. By switching to Node 16 with nvm, SWA seems to be running stably now.
Describe the bug My SWA project consists of
About a month ago downloaded v 0.8.2, the following steps VSC created a local DEV I can F5 to launch swa emulator to run and debug both Angular and nodes backend:
.vscode
folderShow all automatic debug configuration
Azure Static Web Apps ...
angular-app: <name of angular app>
.SWA: Run angular-app
from drop-down, F54280
,After upgraded to v 0.8.3, F5 got
To Reproduce Repeating the same steps outlined above
Azure Static Web Apps ...
angular-app: <name of angular app>
Debug drop-down becomesUninstall v 0.8.3, reinstall v 0.8.2 would not get the same prompt back, and it keeps failing.
Desktop (please complete the following information): Version: 1.63.1 (system setup) Commit: fe719cd3e5825bf14e14182fddeb88ee8daf044f Date: 2021-12-14T02:13:54.292Z Electron: 13.5.2 Chromium: 91.0.4472.164 Node.js: 14.16.0 V8: 9.1.269.39-electron.0 OS: Windows_NT x64 10.0.19044