From 34115dcd3c1165aeb169d838e020332b22d79695 Mon Sep 17 00:00:00 2001
From: Guillaume Lours <guillaume.lours@docker.com>
Date: Tue, 12 Jul 2022 12:13:43 +0200
Subject: [PATCH] add configuration to use vuejs sample with Docker Dev
 Environments feature (#253)

Signed-off-by: Guillaume Lours <guillaume.lours@docker.com>
---
 vuejs/.docker/docker-compose.yaml |  9 +++++++++
 vuejs/README.md                   |  8 ++++++++
 vuejs/compose.yaml                |  4 +++-
 vuejs/vuejs/Dockerfile            | 18 +++++++++++++++++-
 4 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 vuejs/.docker/docker-compose.yaml

diff --git a/vuejs/.docker/docker-compose.yaml b/vuejs/.docker/docker-compose.yaml
new file mode 100644
index 0000000..7f0c50b
--- /dev/null
+++ b/vuejs/.docker/docker-compose.yaml
@@ -0,0 +1,9 @@
+services:
+  web:
+    build:
+      context: vuejs
+      target: dev-envs
+    ports:
+      - 8080:8080
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
diff --git a/vuejs/README.md b/vuejs/README.md
index 8ff567f..fc4782e 100644
--- a/vuejs/README.md
+++ b/vuejs/README.md
@@ -59,3 +59,11 @@ Stopping vuejs_web_1 ... done
 Removing vuejs_web_1 ... done
 Removing network vuejs_default
 ```
+
+## Use with Docker Development Environments
+
+You can use this sample with the Dev Environments feature of Docker Desktop.  
+To develop directly web service inside containers, you just need to use the https git url of the sample:  
+`https://github.com/docker/awesome-compose/tree/master/vuejs`
+
+![page](../dev-envs.png)
diff --git a/vuejs/compose.yaml b/vuejs/compose.yaml
index e7dbb11..4d17c8b 100644
--- a/vuejs/compose.yaml
+++ b/vuejs/compose.yaml
@@ -1,6 +1,8 @@
 services:
   web:
-    build: vuejs
+    build:
+      context: vuejs
+      target: development
     ports:
       - 8080:8080
     volumes:
diff --git a/vuejs/vuejs/Dockerfile b/vuejs/vuejs/Dockerfile
index 1b6692a..3f9cf5b 100755
--- a/vuejs/vuejs/Dockerfile
+++ b/vuejs/vuejs/Dockerfile
@@ -1,4 +1,5 @@
-FROM node:14.4.0-alpine
+# syntax=docker/dockerfile:1.4
+FROM --platform=$BUILDPLATFORM node:14.4.0-alpine AS development
 
 RUN mkdir /project
 WORKDIR /project
@@ -9,3 +10,18 @@ RUN yarn global add @vue/cli
 RUN yarn install
 ENV HOST=0.0.0.0
 CMD ["yarn", "run", "serve"]
+
+FROM development as dev-envs
+RUN <<EOF
+apk update
+apk add git
+EOF
+
+RUN <<EOF
+addgroup -S docker
+adduser -S --shell /bin/bash --ingroup docker vscode
+EOF
+# install Docker tools (cli, buildx, compose)
+COPY --from=gloursdocker/docker / /
+CMD ["yarn", "run", "serve"]
+