From 20089c790ba9242dc6e98150b6c11508bbad9015 Mon Sep 17 00:00:00 2001
From: Guillaume Lours <guillaume.lours@docker.com>
Date: Wed, 13 Jul 2022 10:57:34 +0200
Subject: [PATCH] add configuration to use react-nginx sample with Docker Dev
 Environments feature (#269)

Signed-off-by: Guillaume Lours <guillaume.lours@docker.com>
---
 react-nginx/.docker/docker-compose.yaml | 11 +++++++++++
 react-nginx/Dockerfile                  | 18 ++++++++++++++++++
 react-nginx/README.md                   | 11 +++++++++++
 react-nginx/compose.yaml                |  1 -
 4 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100755 react-nginx/.docker/docker-compose.yaml

diff --git a/react-nginx/.docker/docker-compose.yaml b/react-nginx/.docker/docker-compose.yaml
new file mode 100755
index 0000000..285e204
--- /dev/null
+++ b/react-nginx/.docker/docker-compose.yaml
@@ -0,0 +1,11 @@
+services:
+  frontend:
+    build:
+      context: .
+      target: dev-envs
+    container_name: frontend
+    ports:
+      - "80:3000"
+      - "3000:3000"
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
diff --git a/react-nginx/Dockerfile b/react-nginx/Dockerfile
index 2e47fb8..a494b01 100755
--- a/react-nginx/Dockerfile
+++ b/react-nginx/Dockerfile
@@ -1,3 +1,5 @@
+# syntax=docker/dockerfile:1.4
+
 # 1. For build React app
 FROM node:lts AS development
 
@@ -22,6 +24,22 @@ FROM development AS build
 
 RUN npm run build
 
+
+FROM development 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 [ "npm", "start" ]
+
 # 2. For Nginx setup
 FROM nginx:alpine
 
diff --git a/react-nginx/README.md b/react-nginx/README.md
index b26b024..784687d 100755
--- a/react-nginx/README.md
+++ b/react-nginx/README.md
@@ -86,3 +86,14 @@ Stopping frontend ... done
 Removing frontend ... done
 Removing network react-nginx_default
 ```
+
+## Use with Docker Development Environments
+
+You can use this sample with the Dev Environments feature of Docker Desktop.
+
+![Screenshot of creating a Dev Environment in Docker Desktop](../dev-envs.png)
+
+To develop directly on the services inside containers, use the HTTPS Git url of the sample:
+```
+https://github.com/docker/awesome-compose/tree/master/react-nginx
+```
\ No newline at end of file
diff --git a/react-nginx/compose.yaml b/react-nginx/compose.yaml
index 110cd0b..70df352 100755
--- a/react-nginx/compose.yaml
+++ b/react-nginx/compose.yaml
@@ -1,4 +1,3 @@
-version: "3.7"
 services:
   frontend:
     build: