VS Code settings to launch frontend and backend for debug - node.js

Question

I'm trying to get a simple react frontend and nodejs backend up and running and debuggable in vs code. I'm using a compound launch configuration to launch 'client' and 'server' together. The nodejs backend is started automatically for me, but I always have to do an npm start in the console for the client for it to connect. All the tutorials I've seen suggest that this step has to happen before running the debug configuration in vs code. Is it not possible for vs code to start the frontend just like it does for the nodejs backend.
This is what my launch.json looks like:
{
// 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",
"compounds": [
{
"name": "Client+Server",
"configurations": [ "Server", "Client" ]
}
],
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Server",
"program": "${workspaceFolder}/server/server.js"
},
{
"type": "chrome",
"request": "launch",
"name": "Client",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/client/src/index.js"
}
]
}

Answer 1

I had some trouble launching the debug session from beginning so I decided to start the nodejs server then attach the debuggers.
I found this configuration working for me.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach Server",
"restart": true,
"port": 9000
}, {
"type": "chrome",
"request": "launch",
"name": "Launch Client",
"port": 9001,
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/dist",
"sourceMaps": true
}
],
"compounds": [
{
"name": "Attach Client+Server",
"configurations": ["Attach Server", "Launch Client"]
}
]
}
And here are some of the scripts I used for package.json.
{
"scripts": {
"prestart": "rollup -c -w",
"start": "nodemon --ignore '*.ts' --inspect=9000 ./dist/server/index"
},
}
I had to use nodemon to detect changes and restart the node server.
But if your React application need to be started separately from your node application then I suggest using something like http-server to start the local server for your React app. And then use concurrently to start both applications concurrently.
Your package.json may look like the following:
{
"scripts": {
"prestart": "rollup -c -w",
"start:client": "http-server ./dist/client/",
"start:server": "nodemon --ignore '*.ts' --inspect=9000 ./dist/server/index",
"serve": "concurrently \"npm:start:client\" \"npm:start:server\""
},
}
Resource VS Code debug configuration: https://code.visualstudio.com/Docs/editor/debugging

Answer 2

The reason that the client requires an npm start is because you are referring to http://localhost:3000
npm start will actually run a mini web server to serve up your html files on http://localhost:3000
The other way is to use something like http-server on your src, which will have the same effect