Debug angular inside docker container

Question

I have a simple angular application that lives inside a simple docker container. I am trying to attach a debugger using WebStorm but currently having no joy. It doesn't help that I don't have much JS/Angular experience

Dockerfile:

FROM node:12
RUN npm install -g @angular/cli
ENV APP_DIR=/usr/src/app
RUN mkdir -p ${APP_DIR}
WORKDIR ${APP_DIR}
EXPOSE 4200

docker-compose.yml:

version: "3"
services:
  angular-poke-front-end:
    build: .
    ports:
      - "4200:4200"
    volumes:
      - ../:/usr/src/app
    entrypoint: [ "npm", "start" ]
    environment:
      NODE_ENV: "development"

Package.json:

{
  "name": "front-end",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0",
    "debug": "",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
...

I think I need to have a debug script in my package.json file but I wouldn't know how to configure it, then from other resources I've read I might need to pass a debug flag?

user_8795673 · Answer

Here is a good article about the subject Otherwise, you are also able to debug your code from the browser by using the chrome dev tools for example

Debug angular inside docker container

1 Answers