Debug a Typescript-enabled Koa application remotely from a Docker container using Webstorm

Issue: Currently facing challenges while setting up a new NodeJS Project using KoaJS, Typescript, and Docker. The initial setup went as planned, but encountering some difficulties with remote debugging - or at least it seems so from my perspective.

When starting the application and utilizing the "Attach to Node.js/Chrome" Debug Setting in Webstorm, the debugger functions... partially. I am able to reach the breakpoint, however, the same file (e.g., kernel.ts) is being opened again from the docker workdir in Webstorm.

It appears like this:

Fig 1: Kernel.ts with Breakpoint

Fig 2: File opened from docker workdir

Moreover, after navigating through the breakpoints, any additional breakpoints added do not take effect.

Configuration:

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/**/*"
  ]
}

Inquiry: Is this setup feasible? Compiling typescript and running the app with compiled js while debugging with breakpoints set in the typescript file?

I suspect that my typescript configuration might be causing issues. There could be something about Webstorm not recognizing that the kernel.ts in the docker container is the same as the opened file... or maybe Webstorm understands it correctly but my configuration is lacking.

Note: I attempted the same setup without Typescript and it worked smoothly (remote debugging and avoiding reopening the same file from the docker workdir but directly jumping to the file where the breakpoint was placed). Hence, I presume that the typescript configuration is deficient or there is a misunderstanding on my part.

Answer №1

Great news! I was able to find a solution.

Although the changes made were minimal, I am now having Typescipt compile the files before starting the app (using the JetBrains / Webstorm FileWatchers).

I also updated the Json Script command to:

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

Everything is working as expected now.

Edit: It seems that the sourcemap of the generated js files was pointing 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 referencing the compiled js version seems to be the solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Inefficiency in POST method prevents data transmission to MongoDB

I've developed a MERN application and now I'm testing the backend using the REST client vscode extension. This is how it looks: `POST http://localhost:4000/signup Content-Type: application/json { "email": "<a href="/cdn-cgi ...

Definition of union types in JavaScript using Typescript

Looking for assistance in creating a d.ts file for the union-type library found at https://github.com/paldepind/union-type Consider the following union type: let Maybe = Type({ Nothing: [] , Just: [Number] }) I am interested in setting up compi ...

Creating an Object Type from a String Union Type in TypeScript

How can I go about implementing this? type ActionNames = 'init' | 'reset'; type UnionToObj<U> = {/* SOLUTION NEEDED HERE */} type Result = UnionToObj<ActionNames>; // Expected type for Result: `{ init: any, reset: any }` ...

Accessing file uploads in Angular 2

<div class="fileUpload btn btn-primary"> <span>Select File</span> <input id="uploadBtn" type="file" class="upload" value="No File Chosen" #uploadBtn/> </div> <input id="uploadFile" placeholder="No File Selected" disable ...

Integrating TypeScript into an established create-react-app project

Struggling to integrate TypeScript into an existing create-react-app? I've always added it at the beginning of a project using create-react-app my-app --scripts-version=react-scripts-ts, but that's not working this time. The only "solution" I co ...

Packages within the node_modules directory were found to be missing from the Docker Compose

I configured a test compose file to execute integration tests in a NestJS project, however the packages did not install correctly. docker-compose.test.yml version: '3.9' services: test-app: container_name: test-custom-container image: ...

Retrieving component attributes using jQuery or alternate event handlers

In my Angular2 component, I am facing an issue with using vis.js (or jQuery) click events. Despite successfully displaying my graph and catching click events, I encounter a problem where I lose access to my component's properties within the context of ...

Assigning function types to functions that accept generics: A guide

type FormValidationHandler<FormValues> = (params: { formValues: FormValues, debugName?: string, }) => { isValid: boolean, fieldErrors: Record<string, unknown>, formError: string, } const validateForm: FormValidationHandler = param ...

Utilizing Emotion CSS to incorporate images into buttons

I'm trying to add some style to two buttons, Up and Down, by using emotion CSS but I'm having trouble. Currently, I typically style my elements within a function. Is there a way for me to accomplish this with emotion CSS? I checked out but still ...

Express middleware generator function causing a type error

I recently implemented a function that takes a middleware function, wraps it in a try-catch block, and then returns the modified middleware function. tryCatch.ts import { Request, Response, NextFunction } from "express"; export default function ...

Is there a way to prevent prettier from automatically adding a new line when formatting HTML tags with ">"?

While navigating through the Prettier extension in Vscode, I am struggling to find a way to disable a specific scenario. In particular, I am having trouble with the formatting of an html tag. Below is a snippet of code that requires some adjustments whene ...

Trapped in the Google Maps labyrinth (Angular)

Hey there everyone! I'm currently working on an exciting angular application that integrates the Google Maps API. The goal is to create a feature that shows the 20 closest coffee shops based on the user's current location. However, I seem to be r ...

A new interface property type that is customized based on the type property that is passed in

My dilemma lies in a generic interface with a field depending on the passed type. I'm exploring the possibility of having another field that can accept any type from the passed type. For instance: interface sampleObject { name: fullName age: n ...

The response parser in Angular 7 is failing to function correctly

Hey, I recently updated my Angular from version 4.4 to the latest 7 and after encountering several errors, I was able to get my service up and running. However, I'm facing an issue with my output parser function which is supposed to parse the login re ...

Embracing Typescript promises over jQuery deferred for improved code efficiency and reliability

Currently, I have the following lines of code that utilize the JQueryDeferred object from the type definition class jquery.d.ts. My goal is to replace jQuery deferred with TypeScript promises. Here is the existing JQueryDeferred code: class A { privat ...

"Utilizing the power of Angular 6's JSON pipe

Looking for a well-structured formatted JSON, but all I get is confusion and this strange image: https://i.sstatic.net/6mvBu.png Does anyone have any insights on what might be causing the issue? HTML <span style="font-weight: 500;">Payload Data: ...

Utilizing Eithers to effectively manage errors as they propagate through the call chain

I'm delving into functional programming and exploring different ways to handle errors beyond the traditional try/catch method. One concept that has caught my attention is the Either monad in various programming languages. I've been experimenting ...

Error message: "An issue related to md-input binding has been found in the

I encountered a common error while trying to upgrade an app from angular2 to the stable version. Unfortunately, none of the suggested solutions worked for me, even though there seems to be only one widespread solution available. Here's the error messa ...

The separator falls short of spanning the entire width of the page

For some reason, I can't seem to make the divider extend to the full length of the page. <TableRow> <TableCell className={classes.tableCell} colSpan={6}> <Box display="grid" gridTemplateColumn ...

Steps to activate zone-conscious bluebird assurances in Angular 8

In order to make all the promises in my Angular 8 project cancelable, I embarked on a quest to find the perfect library for the job. It was during this search that I stumbled upon bluebird.js, a promising candidate ;-) Following these guidelines on integr ...