host angular web-app in wsl2, access from windows host, develop in vs-code

Or: How do i work in a modern, efficient and really really nice way?

The goal of this article is to set up a system where you will be running an angular web application in WSL2 and access it via a Browser on the Windows Host.
It’s pretty straightforward, because i prepared a little something.

Prepare following docker-compose.yml file (which you want to place somewhere on the same file-system level as your application, or above it, not below!)

version: '3.5'
services:
  my-angular-app:
    image: cryptng/angular:node14ng13
    working_dir: /app
    volumes:
      - ./my-angular-app:/app
      - node_modules:/app/node_modules
    ports:
      - "127.0.0.1:4200:4200"
    command: bash -c "npm install && ng serve --host 0.0.0.0 --port 4200"
volumes:
  node_modules: {}

The corrected YAML above preserves the 2021 Node 14 / Angular 13 setup. Those versions are now out of support; use it as a historical example, and choose supported versions for new work. The host port binds to loopback. The server listens on all interfaces inside the container so Docker can forward traffic to it.

You might notice that we are using an existing image from the docker hub.
It’s actually a repository that i manage and maintain with a friend.
If you check it out in detail, you will notice that this images matches the latest
angular-web-development standards as per november of 2021 (nearing the end of the corona crisis, probably, maybe).

The image basically uses Node:14 as a base image, containing NPM and YARN, and installs Angular-CLI 13 and Angular-Core 13 on a local and global level, then exposes port 4200.

THIS IMAGE ASSUMES THAT THE DOCKER COMPOSE FILE IS ON THE SAME LEVEL AS THE APPLICATION DIRECTORY & THE APPLICATION DIRECTORY IS NAMED “MY-ANGULAR-APP”

Of course, you can easily modify the “ports” section of the compose file to change the port you want to serve to, the LEFT side is the host side.

That means that if you run this compose file with a valid application, you will be able to reach your application from a browser on the windows host via “http://localhost:4200”.
If you change the LEFT element from 4200 to 4201, the address will be “http://localhost:4201” independently from the actual EXPOSE command in the dockerfile providing the container.

ng serve --host 0.0.0.0 --port 4200 --proxy-config proxy.config.json

The optional command above adds a development proxy. Use it only if proxy.config.json exists and points to your backend. The basic Compose example does not require a proxy file or --disable-host-check.

The npm command will install all dependencies whenever the docker-compose has been run.

Install Visual Studio Code on Windows and use its WSL extension. From the application directory in WSL, run code .. The extension installs its server inside WSL; you do not need the Linux desktop version of VS Code there. See Microsoft’s WSL and VS Code guide (checked 15 October 2026).

If you now have a valid application in the “my-angular-app” directory, you can have fun and start developing.

Enjoy!

Originally published on blog.yavuz.support: https://blog.yavuz.support/host-angular-web-app-in-wsl2-access-from-windows-host-develop-in-vs-code.