static-web-apps-cli: Could not connect to "http://localhost:4200". Is the server up and running?

@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

@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"
			]
		}
	]
}

@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.

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.

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.

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.

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.

@alexweininger I can confirm that it works in this version. When will this be available publicly? Thank you!

How and where is it fixed? This issue was closed with no comment or reference and the problem still persists in the current versions.

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?

Yeah, we have the fix ready for it.

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.