I am new to VS Code and JavaScript, and I am trying to make a simple app using Vite and Svelte, but I have a problem which I can't seem to resolve. (My code is currently just the default code given when a new project is created; I haven't changed it at all.)
When I run my app through Windows Terminal (by navigating to the project root directory and running npx vite dev), the app runs fine and my browser can connect to localhost:3000.
However, when I press on either:
Run > Start Debugging, orRun > Run Without Debuggingin Visual Studio Code, it opens up Chrome to localhost:3000 but I just see localhost refused to connect. I think VS Code is never actually running the command npx vite dev, but I don't know how to change this.
When I open up .vscode/launch.json, I see this:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug with Chrome",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
}
]
}
And I am not sure what I should add here to get this to work. Any help would be appreciated, and sorry if this is a bit of a stupid question, but I couldn't fund any help searching Google or SO.
EDIT:
I have almost got this working by adding a preLaunchTask, but now chrome no longer automatically opens when I start debugging, so I might as well just run npm: dev on its own.
Here is .vscode/launch.json now:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug with Chrome",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"preLaunchTask": "npm: dev"
}
]
}
I think this might be because the npm: dev task (which effectively runs npx vite dev) is blocking, and only finishes when I press the stop button (or double-click ctrl+c), so chrome is not opened because VS Code thinks the pre-launch task is still running.
If there any way I can tell VS Code to open Chrome while continuing to run npm: dev?
Instead of having it run npx vite dev (which is the npm: dev task), have it run npx vite dev --open :)
Here's the VSCode way to start the Vite Dev server (npx vite) and then automatically open Chrome and attach a debug session to it.
// launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch Vite DEV server",
"request": "launch",
"runtimeExecutable": "npx",
"runtimeArgs": [
"vite",
],
"type": "node",
"serverReadyAction": {
"action": "debugWithChrome",
"pattern": "Local: http://localhost:([0-9]+)",
"uriFormat": "http://localhost:%s"
}
},
],
}
Many things can be customized in the launch.json. I recommend you to read the documentation linked above.
The "magic" happends in "serverReadyAction" where you set the "action" to "debugWithChrome" to open chrome.
The "pattern" is a regex used to capture the port on which the server have been launched.
Finally, you add the port to the URL in the "uriFormat" by using %s. %s represent the capture done with the regex in "pattern"