Merge pull request #255 from milas/dev-envs-angular

angular: add dev envs configuration
master
Guillaume Lours 2 years ago committed by GitHub
commit 8784f95a69
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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

@ -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 RUN mkdir /project
WORKDIR /project WORKDIR /project
@ -10,3 +12,20 @@ RUN npm ci
COPY . . COPY . .
CMD ["ng", "serve", "--host", "0.0.0.0"] 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"]

@ -4,24 +4,17 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
## Development server ## 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.

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 158 KiB

Loading…
Cancel
Save