Configure VSCode and Cloud Code to debug TypeScript Node application in Kubernetes

Question

I am trying to figure out if it is possible to use Cloud Code in VSCode to debug a TypeScript Node application in Kubernetes remotely?

I used Cloud Code regularly to debug JS Node applications in Kubernetes, but I am having hard time to configure launch.json to do the same for TypeScript Node app. Sources for that is non-existent and at this point I am not even sure if this is possible.

Here is the launch.json file I configured. Also you can see a setting for local debugging which works fine:

{
"configurations": [
    {
        "name": "Kubernetes: Run/Debug",
        "type": "cloudcode.kubernetes",
        "request": "launch",
        "skaffoldConfig": "${workspaceFolder}\\skaffold.yaml",
        "watch": false,
        "cleanUp": false,
        "portForward": true,
        "imageRegistry": "zzz.common.repositories.zzz.zzz"
    },
    {
        "type": "node",
        "request": "launch",
        "name": "Local Debug",
        "runtimeExecutable": "node",
        "runtimeArgs": ["--nolazy", "-r", "ts-node/register/transpile-only"],
        "args": ["${workspaceRoot}/lcs/src/index.ts"],
        "cwd": "${workspaceRoot}/lcs",
        "internalConsoleOptions": "openOnSessionStart",
        "env": { "NODE_ENV": "development" },
        "skipFiles": ["<node_internals>/**", "node_modules/**"]
      }
]}

In my tsconfig.json I have "sourceMap": true. I assume I need to map my dist folder in Kubernetes (that is where I compile TS files to JS files) to src folder (which contains original TS files). Problem is I couldn't find any documentation to do that.

Here is my docker file so you can see that I am putting the compiled files into ./dist folder:

FROM node:19-alpine as builder
WORKDIR /app
COPY package*.json ./
COPY tsconfig.json ./
RUN npm install
COPY . .
RUN npm run build


FROM node:19-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY --from=builder /app/dist ./dist

EXPOSE 3000
CMD [ "node", "./dist/index.js" ]

Cloud Code and Skaffold support typescript for both running the app and debugging. Have you been able to get it to run, and only debugging is failing, or is it not working altogether? In my Typescript app, my package.json contains "main": "src/index.js", "scripts": { "production": "tsc-watch --noClear --onSuccess 'node src/index.js'", } and in skaffold.yaml, I'm syncing the files as sync: manual: # Sync all the TypeScript files that are in the src folder # with the container src folder - src: 'src/**/*.ts' dest: . — Sebastian Krupa, Apr 12 '23 at 01:14

MilesDyson · Accepted Answer · 2023-04-12T09:57:48.297

I figured it out. It needed a bit more configuration in launch.json. Specifically debug section with sourceFileMap. Here is the final result if anybody else has trouble making it work:

{
    "configurations": [
        {
            "name": "Kubernetes: Run/Debug",
            "type": "cloudcode.kubernetes",
            "request": "launch",
            "skaffoldConfig": "${workspaceFolder}\\skaffold.yaml",
            "watch": false,
            "cleanUp": false,
            "portForward": true,
            "imageRegistry": "zzz.common.repositories.zzz.zzz",
            "debug": [
                {
                    "image": "zzz.common.repositories.zzz.zzz/zzz-lcs/k8s",
                    "containerName": "lcs",
                    "sourceFileMap": {
                        "${workspaceFolder}\\lcs\\dist": "/app/dist"
                    }
                }
            ]
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Local Debug",
            "runtimeExecutable": "node",
            "runtimeArgs": ["--nolazy", "-r", "ts-node/register/transpile-only"],
            "args": ["${workspaceRoot}/lcs/src/index.ts"],
            "cwd": "${workspaceRoot}/lcs",
            "internalConsoleOptions": "openOnSessionStart",
            "env": { "NODE_ENV": "development" },
            "skipFiles": ["<node_internals>/**", "node_modules/**"]
          }
    ]
}

Note that my files are located in my local inside /lcs/app/src and my build put them in ./lcs/dist

When you click on Debug on Kubernetes without this setting, the extension should prompt you to enter a source mapping, was that happening for you, or did it start debugging without setting that field at all? — Sebastian Krupa, Apr 12 '23 at 16:34
Yes it adds the debug array part with the sourceFileMap. But folder paths were wrong in sourceFileMap. It adds some default values. When I give the correct paths, it worked. sourceFileMap is the attribute it needs in order to map .js files with .ts files using .map.js files in target folder. — MilesDyson, Apr 14 '23 at 11:33

Configure VSCode and Cloud Code to debug TypeScript Node application in Kubernetes

1 Answers1