Debugging React app started with yarn


I'm working on an app that uses yarn to start it. Typically, I run yarn dev to start it. In the package.json file, dev is defined:

"dev": "yarn cross-env NODE_ENV=development node src/server.js",

I can't figure out how to create a Debug configuration that connects to the app and lets me set breakpoints in IntelliJ. I'm not a frontend developer, and I'm unclear about what information I need. Another team member has configured VSCode for debugging like this:

     "name": "Launch AppXX",
     "request": "launch",
     "type": "chrome",
     "url": "https://appxx:443",
     "webRoot": "${workspaceFolder}/app",
     "sourceMaps": true

What would be the equivalent IntelliJ debug configuration configuration?



Did you try the steps in Start the application by running yarn dev (can be done either in terminal or with NPM run configuration, using the gutter icons), and, once the application is up and running, select the JavaScript Debug run configuration with https://appxx:443 set as URL and press Debug.
If this doesn't work for you, could you please share a screencast of the problem with us? This will help us to understand what it looks like on your side.


I re-read those instructions and got it working. For reference, this is how I run the react app:

“yarn dev”


"dev": "yarn cross-env NODE_ENV=development node src/server.js",

And this simple configuration connects the debugger:


It was a tricky, because we use nginx and therefore a different URL with a different port when manually connecting to the app with a browser.