angular: add dev envs configuration

Signed-off-by: Milas Bowman <milas.bowman@docker.com>

angular/.docker/docker-compose.yaml

@@ -0,0 +1,11 @@
+services:
+  web:
+    build:
+      context: angular
+      target: dev-envs
+    ports:
+      - 4200:4200
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+      - ./angular:/project
+      - /project/node_modules

angular/angular/.dockerignore

@@ -0,0 +1 @@
+node_modules/

angular/angular/Dockerfile

@@ -1,4 +1,6 @@
-FROM node:17.0.1-bullseye-slim
+# syntax=docker/dockerfile:1.4
+
+FROM --platform=$BUILDPLATFORM node:17.0.1-bullseye-slim as builder
 
 RUN mkdir /project
 WORKDIR /project
@@ -10,3 +12,20 @@ RUN npm ci
 
 COPY . .
 CMD ["ng", "serve", "--host", "0.0.0.0"]
+
+FROM builder as dev-envs
+
+RUN <<EOF
+apt-get update
+apt-get install -y --no-install-recommends git
+EOF
+
+RUN <<EOF
+useradd -s /bin/bash -m vscode
+groupadd docker
+usermod -aG docker vscode
+EOF
+# install Docker tools (cli, buildx, compose)
+COPY --from=gloursdocker/docker / /
+
+CMD ["ng", "serve", "--host", "0.0.0.0"]

angular/angular/README.md

@@ -4,24 +4,17 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
 
 ## Development server
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Run `docker compose up -d` for a dev server.
+Navigate to `http://localhost:4200/`.
+The app will automatically reload if you change any of the source files.
 
-## Code scaffolding
+## Use with Docker Development Environments
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+You can use this sample with the Dev Environments feature of Docker Desktop.
 
-## Build
+![Screenshot of creating a Dev Environment in Docker Desktop](../dev-envs.png)
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+To develop directly on the services inside containers, use the HTTPS Git url of the sample:
-
+```
-## Running unit tests
+https://github.com/docker/awesome-compose/tree/master/angular
-
+```
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

angular/compose.yaml

@@ -1,6 +1,8 @@
 services:
   web:
-    build: angular
+    build:
+      context: angular
+      target: builder
     ports:
       - 4200:4200
     volumes: