@bellerofonte

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

Дано:
Проект, состоящий из двух частей:
  • бэкенд на 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
  • Вопрос задан
  • 75 просмотров
Решения вопроса 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 за наводку.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Robur
@Robur
Знаю больше чем это необходимо
Фронт отлаживаете в девтулзах в браузере, бек запускаете напрямую из вебшторма через дебаг скрипта nodejs, и отлаживайте в IDE.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
07 мар. 2021, в 03:18
1500 руб./за проект
06 мар. 2021, в 22:58
70000 руб./за проект
06 мар. 2021, в 22:36
10000 руб./за проект