How to debug a bundle of Node.js backend and React frontend as a whole in WebStorm?

Question

Debugging

Given:
A project consisting of two parts:

• backend on Node.js
  
• Rect frontend built by Webpack
  

IDE - WebStorm. I added debug configs:

• Node.js with start .js backend file
  
• npm with package.json of the whole project and arguments Command: run,Script: dev
  

Piece of package.json:

...
"scripts": {
        ...
        "dev": "webpack serve --mode=development --config webpackfile.js --hot"
    }
...

Thus, I can debug the backend separately and the frontend separately , but not together.
When debugging the frontend, the backend is webpack-dev-server. On the one hand, it’s good that hot-reload is available, but on the other hand, it’s bad that all the business logic that the backend is responsible for is not available.
Question:
How to make it possible to debug both front-end and back-end at the same time?
UPD
Let me explain a little. I'm looking for a way to make WebStorm start two processes when debugging starts:

1. webpack --mode=development --config webpackfile.js --watch

   , which makes the initial assembly of the frontend to the desired folder, and then rebuilds if any of the frontend sources changes
   
2. nodejs backend.js, which is passed through arguments or an environment variable the path where webpack assembled the frontend in the previous step
   

and when debugging was stopped, both of these processes were nailed.
Well, or some other similar way to complete both the webpack assembly and the nodejs script

Answer 1

In general, I found an acceptable solution. Who cares:

1. edit the dev script in the file package.json:
   

   ...
   "scripts": {
           ...
           "dev": "webpack --mode=development --config webpackfile.js --watch"
       }
   ...

   
   we leave the debug configuration of the frontend in WebStorm as it is.
   
2. In the backend debug configuration, add the CONTENT_PATH environment variable equal to the path of the folder where webpack builds the frontend, relative to the main backend .js file. In my caseCONTENT_PATH='/../../debug'
   
3. In the .js file, we write the path to the content like this:
   

   const contentPath = path.resolve(__dirname + (process.env.CONTENT_PATH || ''));

   
   and then we use it everywhere contentPathwhen accessing frontend files
   
4. To start debugging, run both debug configurations. We debug the frontend in the browser, the backend - in WebStorm.
   

Thanks Robur for the tip.

Answer 2

You debug the front in devtools in the browser, run the back directly from the webstorm through the debug of the nodejs script, and debug in the IDE.
If you want to do this and that in a webstorm, then the front can also be launched along with the back and debugged in the IDE and not in the browser (you start two processes for debugging in the webstorm except for one), but this is not for everyone, I don’t like it and therefore I won’t tell you a specific config . You can google.