Docker devcontainer serve angular app on local network

Question

Windows 10 Docker Desktop on WSL2

Goal: serve an angular app from my devcontainer over my local network (specifically for testing on mobile)

Reproduce:

1. Create a hello world angular application in a clean git repo
2. clone the repo into a new devcontainer (Typescript/Node)
3. serve the applcation

Things I've tried (and every permutation herein):

• --network=host (Never worked on windows, but thought it might on WSL2 - doesn't)
• EXPOSE 4200
• runArgs: "-p 4200:4200"
• appPort: [4200]
• opening port 4200 on PC firewall
• ng serve --host 0.0.0.0 --port 4200

Additional Information:

• ng serve does allow me to view the site on my host machine
• cloning the repo to my host and running ng serve --host 0.0.0.0 does allow me to access the site over my network (but moving in and out of the devcontainer isn't reasonable)

---

My current DockerFile is pretty vanilla:

ARG VARIANT="14-buster"
FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}

RUN npm install -g @angular/cli
RUN npm i yalc -g

---

My devcontainer.js file is also unchanged (except for adding a volume)

// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.187.0/containers/typescript-node
{
    "name": "Node.js & TypeScript",
    "build": {
        "dockerfile": "Dockerfile",
        "args": { 
            "VARIANT": "14"
        }
    },

    "settings": {},

    "extensions": [
        "dbaeumer.vscode-eslint"
    ],

    "remoteUser": "node",
    "mounts": ["source=D:/GIT/docker/volumes/yalk,target=/yalc,type=bind,consistency=cached"],
}

Answer 1

you can accomplish this by modifying the option "appPort" inside devcontainer.js to this:

"appPort": ["4200:4200" ]

This way we are telling docker to "publish" port 4200 in our local network.

After this rebuild your devcontainer and the app should be accessible from phone by entering your IPv4:4200

You can find more info here in Dev Container metadata reference