Search code examples
javascriptreactjsdebuggingnginxwebstorm

Debug React App running behind a nginx proxy

I have a react app that is running on localhost:3000. And my Backend API is running on localhost:8181. In order to remove cross-origin requests, and some other compatibility reasons, I set up an nginx reverse proxy for my react app and my backend API. They now both run on localhost:8443.

The Problem: When I create a JavaScript debug configuration in Webstorm for localhost:3000 it works fine. But a configuration for localhost:8443 is not able to debug my react app. I cannot debug on localhost:3000 because I do not get data from the API there.

I can debug using the console.log() but it would be really nice to have it debug in the IDE itself. I tried searching for a solution but did not find anything helpful for my configuration.

Any pointer to how I can enable the debug for such a configuration?

Solution

  • So, turns out the problem was my self-signed certificate. It had localhost.com as Common-Name instead of localhost.

    Which can be found out by looking for (java.security.cert.CertificateException: No name matching localhost found) exception in WebStorm logs. (How to find Log files)

    I created a new certificate. This time with Common-Name as localhost and the debugging works!

    Here is the link to the origianl issue that I opened on Youtrack for Webstorm support. (Link)

    Hope this helps someone in the future!