VSCode chrome debugger for nested create-react-app directory

Question

I am trying to build a project with node and react. Here's my project; it does a little more than hello world, that's it: https://github.com/andrewnessinjim/react-node-kickstarter/tree/so-question

Importing this project into vscode and running docker-compose.yml brings the project up, like so:

I would like to debug the client code in vscode. To do this, I used the settings provided here: https://create-react-app.dev/docs/setting-up-your-editor/#visual-studio-code and it didn't help. I tweaked the parameters to the following based on my assumptions, because I am using docker compose:

{
            "localRoot": "./client/src",
            "remoteRoot": "/app/client/src",
            "webRoot": "/app/client/src",
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
}

I also tried {"localRoot": "${workspaceFolder}/client/src"}. I also tried the configuration from this answer.

I selected "Chrome Launch" from "Run and Debug" section to open Chrome with the debugger attached and placed a breakpoint at line 38 in App.tsx:

In each case, the breakpoint doesn't bind, indicated by grey circle next to the breakpoint in below screenshot:

I think the configurations need to be tweaked because I have create-react-app in a nested directory. How can I make this work? Please let me know if there's a better way to share this kind of question! I am not sure if it this scenario would work in all environments; it works on Ubuntu.

NOTE: I used launch type pwa-chrome because chrome is now deprecated. VSCode docker extension is required for the above scenario.

EDIT: I tried this in Windows as well and I have the same problem. I just had to fix the line endings in the project using this answer to make the app work in Windows.

Answer 1

I tried it with my React App and it worked with docker-compose.

I started the app in the docker exposing port 3000 for React App and 9229 for Debug. It is accessed at http://localhost:3000.

Here is my docker-compose.yml

version: "3.3"

services:
  frontend:
    container_name: frontend
    build:
      context: .
      dockerfile: frontend.Dockerfile
    restart: unless-stopped
    ports:
      - "3000:3000"
      - "9229:9229"
    volumes:
      - ./frontend/:/app/
    working_dir: "/app"
    tty: true

The frontend.Dockerfile

FROM node:16.15

WORKDIR /app

# Install Typescript Globally
RUN npm install -g typescript

So I configured the launch.json in VSCODE for debug, configuring the React App Folder at "webRoot": "${workspaceFolder}/frontend"

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome for Debugging",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/frontend"
    }
  ]
}

I runned Launch Chrome for Debugging in VSCODE and it launched a new chrome window to debug the app.

Tested in:

• Ubuntu 22.04 LTS
• Docker version 20.10.17
• docker-compose version 1.29.2