Как в WebStorm отлаживать связку Node.js бэкенд и React фроненд как единое целое?

Question

[bellerofonte]

Дано:
Проект, состоящий из двух частей:

• бэкенд на Node.js
  
• фронтенд на Rect, который собирается Webpack-ом
  

IDE - WebStorm. Я добавил отладочные конфигурации:

• Node.js с указанием стартового .js файла бэкенда
  
• npm с указанием package.json всего проекта и аргументами Command: run, Script: dev
  

Кусок package.json:

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

Таким образом, я могу отлаживать отдельно бэкенд и отдельно фронтенд, но никак не вместе.
При отладке фронтенда бэкендом выступает webpack-dev-server. С одной стороны - хорошо, что доступен hot-reload, но с другой - плохо, что недоступна вся бизнес-логика, за которую отвечает бэкенд.
Вопрос:
Как сделать так, чтобы можно было отлаживать одновременно и фронтенд и бэкенд?
UPD
Поясню немного. Я ищу способ сделать так, чтобы WebStorm при запуске отладки запускал два процесса:

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

   , который делает первичную сборку фронтенда в нужную папку, а потом делает пересборку, если меняется какой-либо из исходников фроненда
   
2. nodejs backend.js, которому через аргументы или переменный окружения передается путь, куда webpack собрал фронтенд на предыдущем шаге
   

а при остановке отладки оба этих процесса прибивались.
Ну или какой-либо другой аналогичный способ выполнить и сборку webpack и скрипт nodejs

Answer 1

[bellerofonte]

В общем, нашел приемлемое решение. Кому интересно:

1. редактируем dev-скрипт в файле package.json:
   

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

   
   отладочную конфигурацию фронтенда в WebStorm оставляем как есть.
   
   
2. В отладочную конфигурацию бэкенда добавляем переменную окружения CONTENT_PATH равную пути папки, куда webpack собирает фронтенд, относительно главного .js файла бэкенда. В моем случае CONTENT_PATH='/../../debug'
   
   
3. В .js файле прописываем путь к контенту примерно так:
   

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

   
   и далее везде используем contentPath при обращении к файлам фронтенда
   
   
4. Для запуска отладки запускаем обе отладочные конфигурации. Фронтенд отлаживаем в браузере, бэкенд - в WebStorm.
   
   

Спасибо Robur за наводку.

Answer 2

[Robur]

Фронт отлаживаете в девтулзах в браузере, бек запускаете напрямую из вебшторма через дебаг скрипта nodejs, и отлаживайте в IDE.

Если хочется и то и то в вебшторме, то фронт тоже можно запустить вместе с беком и отлаживать в IDE а не в браузере (запускаете два процесса для дебага в вебшторме кроме одного) но это на любителя, мне не нравится и поэтому конкретный конфиг не подскажу. Можно нагуглить.