Remote debug a koa application (Typescript) from a docker container in Webstorm

Question

Problem: I'm currently trying to setup a new NodeJS Project using KoaJS, Typescript and Docker. The Setup works so far as planned, but the remote debugging gives me some problems - or at least for my understanding.

If i start the application and use the "Attach to Node.js/Chrome" Debug Setting from Webstorm the debugger works... to some extend. I run into the breakpoint but the the same file (i. E. kernel.ts) is opened again from the docker workdir (in Webstorm).

It looks like this:

Fig 1: Kernel.ts with Breakpoint

Fig 2: File opened from docker workdir

Furthermore - after jumping through the breakpoints - additional added breakpoints show no effect.

Setup:

DockerFile

FROM node:11.1.0-alpine

WORKDIR /share/example

COPY package.json .
RUN npm install --quiet

COPY . .

DockerCompose

version: '3'

services:
  web:
    container_name: example_web
    build: .
    command: npm run debug
    volumes:
    - .:/share/example
    - /share/example/node_modules
    ports:
    - "3000:3000"
    - "9229:9229"

package.json script

"debug": "nodemon --inspect=0.0.0.0:9229 -e ts,tsx --exec node -r ts-node/register ./src/kernel.ts",

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2017",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "outDir": "./dist",
    "sourceMap": true,
    "inlineSources": true
  },
  "include": [
    "./src/**/*"
  ]
}

Question: Is this setup even possible? Having typescript compiled and let the app run with the compiled js and debug with breakpoints set in the typescript file?

I have my suspicions that my typescript config is probably the culprit. Something about Webstorm not understanding that the kernel.ts in the docker container is the same as the opened file... or webstorm understands it perfectly fine but my config is just... lacking.

Ps: I tried the same setup without Typescript and it works fine (i. E. remote debugging and not opening the same file from the docker workdir but jumping straight to the file where the breakpoint was set). Therefore - i guess - the typescript config is lacking or i have a conceptual misunderstanding.

Answer 1

Okay. Problem solved.

Didn't really changed that much. I let Typescipt now compile the files before starting the app (using the JetBrains / Webstorm FileWatchers).

and changed the Json Script command to:

"nodemon --inspect=0.0.0.0:9229 ./dist/kernel.js"

Works now as expected.

Edit: I guess that the sourcemap of the generated js-files pointed to the "actual source" - the files in the docker container - instead of the "source" in the workdir. Compiling the TS files on the host and just pointing to the compiled js version works fine.