Debugging Typescript React App in Docker Container
Hello Everyone!
I am using a simple dockerized development environment: A common create-react-app runs in a Node.js docker container behind a Nginx Reverse proxy. Static files are served via HTTPS with a self signed certificate.
I can easily debug the React App with this VS Code launch configuration:
{
"name": "Debug CRA",
"type": "chrome",
"request": "launch",
"url": "https://localhost",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"/app/src/*": "${webRoot}/*"
}
}
I tried different configurations in Webstorm but the breakpoints are not hit. It seems like that the Remote URLs webpack:///src and webpack:///./src are not working for Typescript React apps. Is there a setting similar to sourceMapPathOverrides in Webstorm?
Please sign in to leave a comment.
Such URLs should work out of the box; if they don't, you can try specifying the URL mappings between the files in the file system and the paths specified in the source maps on the dev server in your JavaScript Debug run configuration (see https://www.jetbrains.com/help/webstorm/debugging-javascript-on-an-external-server-with-mappings.html#ws_js_debug_on_remote_server_mappings)
If this doesn't help, it must be a certificate issue; please share your idea.log (Help > Show Log in...). Please don't paste its content here, upload it to some file server and provide a link
Thank you. It was a certificate problem. Now everything works fine.