I am trying to get the right "Recipe" to debug an Azure Dev Spaces. I am getting close but I keep running into various errors. I hope we can get to a solution so it can help others who are stuck with the same issue. So far this is what I have:

This is my Docker File:

FROM node
ENV PORT 80
WORKDIR /app
COPY package*.json ./
RUN npm install -g @angular/cli
RUN npm install
COPY . .

EXPOSE 80 49153
CMD ["npm", "start"]

This is the pre-launch task in tasks.json

 {
  "label": "azds: prelaunch-ng-serve",
  "command": "azds",
  "args": ["up", "--port=54783:80", "--keep-alive"],
  "options": {
    "cwd": "${workspaceFolder}"
  },
  "problemMatcher": []
}

This is the launch.json configuration:

 {
  "name": "Launch ng-serve (AZDS)",
  "type": "node",
  "request": "launch",
  "protocol": "legacy",
  "preLaunchTask": "azds: prelaunch-ng-serve",
  "cwd": "${workspaceFolder}",
  "address": "127.0.0.1",
  "port": 54783,
  "localRoot": "${workspaceFolder}/.",
  "remoteRoot": "/app"
},

If I test the above using Docker Compose it works perfectly. My issue is deploying and testing the app in Azure Dev Spaces.

When I initiate a debug session this is what I get:

Step 1/9 : FROM node
Step 2/9 : ENV PORT 80
Step 3/9 : WORKDIR /app
Step 4/9 : COPY package*.json ./
Step 5/9 : RUN npm install -g @angular/cli
Step 6/9 : RUN npm install
Step 7/9 : COPY . .
Step 8/9 : EXPOSE 4200 49153
Step 9/9 : CMD ["npm", "start"]
Built container image in 1m 29s
Waiting for container...10s
Service 'dpclient' port 'http' is available at http://xxxx.eastus.aksapp.io/
Service 'dpclient' port 80 (http) is available at http://localhost:54783
Port forward 54783:80 failed.

I confirm that the pod is running, but the web page returns:

This page isn’t working localhost sent an invalid response. ERR_INVALID_HTTP_RESPONSE

I also get an error from VS Code:

Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: socket hang up)

Frequently, I get a timeout when npm install executes:

Step 1/9 : FROM node
Step 2/9 : ENV PORT 80
Step 3/9 : WORKDIR /app
Step 4/9 : COPY package*.json ./
Step 5/9 : RUN npm install -g @angular/cli
Step 6/9 : RUN npm install
Waiting for container...

I think this is because it takes a bit for npm install to execute. I increased the timeout values in the Azure Portal kubernetes Frontend IP Configuration to 4 minutes. That didn't fix the issue.

I also tried adding a timeout value to launch.json:

{ "name": "Launch ng-serve (AZDS)", "type": "node", "request": "launch", "protocol": "legacy", "preLaunchTask": "azds: prelaunch-ng-serve", "cwd": "${workspaceFolder}", "address": "127.0.0.1", "port": 54783, "localRoot": "${workspaceFolder}/.", "remoteRoot": "/app", "timeout": 18000 }

Does anyone see any obvious errors above? Maybe if sommeone has this working they can provide a working "recipe"?

Thanks :-)